Madasu K Madasu K - 1 month ago 7
AngularJS Question

need to update value of a property in all objects of an array of objects

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.

Answer

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.item.Hr = 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="angular-bootstrap@0.12.0" 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>

Comments