需要更新对象数组的所有对象中的属性值

In my angularjs application have an array of objects as shown below :

在我的angularjs应用程序中有一个对象数组，如下所示：

$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.

现在，在click事件中，我需要将数组中每个对象的'itemHr'更新为一个新的值，让我们说（25）。我不想创建新的对象数组而只是修改现有的对象。如果我们可以使用angularjs实用程序来执行它或下划线库，两者都适合我。任何人都可以帮助我。

2 个解决方案

#1

Why not vanila js with for loop?

为什么vanila js没有for循环？

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="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>

#2

angular.forEach($scope.rowData, function(item,index){
   item["itemHr"] = "25";
})

#1