2015-10-20 15 views
8

In meinem AngularJS Anwendung Wert einer Eigenschaft aktualisieren, wie unten dargestellt:müssen haben eine Reihe von Objekten in allen Objekten eines Arrays von Objekten

$scope.rowData = [{ 
    "expNum": "678",  
    "itemHr": "10", 
    "highRe": "C" 
    }, { 
    "expNum": "978",  
    "itemHr": "3", 
    "highRe": "Y" 
}] 

nun auf einem Click-Ereignis muss ich aktualisieren ‚itemHr‘ von jedem Objekt im Array auf einen neuen Wert, sagen wir (25). Ich möchte kein neues Array von Objekten erstellen, sondern nur das vorhandene. Wenn wir angularjs-Dienstprogramme verwenden können, um dies zu tun oder die Bibliothek zu unterstreichen, sind beide für mich in Ordnung. kann mir irgendjemand dabei helfen.

Antwort

16

Warum nicht Vanila js mit for-Schleife?

for(var i = 0; i<$scope.rowData.length; i++) 
{ 
    $scope.rowData[i].itemHr = 25; 
} 

oder Unter

_.each($scope.rowData, function(item){ item.itemHr = 25;}); 

oder Winkel

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>

+0

Dank für Winkel – Artiom

+0

Artiom @dboskovic habe ich die Antwort, aber kleine Notiz akzeptiert, wenn ich gebe item.itemHr 25 =, ist es nicht statt zu arbeiten, wenn ich gebe item [itemHr] = 25, es funktioniert gut –

+0

@MadasuK Ich weiß nicht, warum es nicht für dich funktioniert hat. Überprüfen Sie die Probe – Artiom

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