Menu
In my angularjs application have an array of objects as shown below :
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}]
Now on a click event I need to update 'itemHr' of each object in the array to some new value let say (25). I don't want to create new Array of object rather modify the existing only. If we can use angularjs utilities to do it or underscore library, both are fine for me. can any one help me with that.
789
Why not vanila js with for loop?
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
or underscore
_.each($scope.rowData, function(item){ item.itemHr = 25;});
or angular
angular.forEach($scope.rowData,function(item){ item.itemHr = 25; });
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("maincontroller", function($scope) {
$scope.rowData = [{
"expNum": "678",
"itemHr": "10",
"highRe": "C"
}, {
"expNum": "978",
"itemHr": "3",
"highRe": "Y"
}];
$scope.update = function(){
for(var i = 0; i<$scope.rowData.length; i++)
{
$scope.rowData[i].itemHr = 25;
}
}
});<!doctype html>
<html lang="en" ng-app="myApp" ng-controller="maincontroller">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<script data-require="[email protected]" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<table class="table table-hover table-bordered" >
<tbody >
<tr ng-repeat="row in rowData">
<td>
{{row.expNum}}
</td>
<td>
{{row.itemHr}}
</td>
<td>
{{row.highRe}}
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" class="btn btn-danger" ng-click="update()" value="Update ItemHr to 25">
</body>
</html>
angular.forEach($scope.rowData, function(item,index){
item["itemHr"] = "25";
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
