2015-10-20 25 views
8

Trong ứng dụng angularjs tôi có một mảng của các đối tượng như hình dưới đây:cần phải cập nhật giá trị của một tài sản trong tất cả các đối tượng của một mảng của các đối tượng

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

Bây giờ trên một sự kiện click Tôi cần cập nhật 'itemHr' của mỗi đối tượng trong mảng với một số giá trị mới cho phép nói (25). Tôi không muốn tạo mảng mới của đối tượng thay vì chỉ sửa đổi hiện tại. Nếu chúng ta có thể sử dụng các tiện ích angularjs để thực hiện nó hoặc nhấn mạnh thư viện, cả hai đều tốt cho tôi. bất kỳ ai có thể giúp tôi với điều đó.

Trả lời

16

Tại sao không vanila js với vòng lặp?

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

hoặc nhấn

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

hoặc góc

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

nhờ @dboskovic cho angular – Artiom

+0

Artiom, tôi đã chấp nhận câu trả lời nhưng lưu ý nhỏ, khi tôi đưa item.itemHr = 25, nó không hoạt động thay vì nếu tôi đưa item [itemHr] = 25, nó hoạt động tốt –

+0

@MadasuK không biết tại sao nó không hiệu quả với bạn. Kiểm tra mẫu – Artiom

2
angular.forEach($scope.rowData, function(item,index){ 
    item["itemHr"] = "25"; 
}) 
Các vấn đề liên quan