2015-10-20 7 views
8

nella mia applicazione angularjs avere un array di oggetti come indicato di seguito:necessità di aggiornare il valore di un immobile a tutti gli oggetti di un array di oggetti

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

Ora in un evento click Ho bisogno di aggiornare 'itemHr' di ogni oggetto nell'array a qualche nuovo valore, diciamo (25). Non voglio creare una nuova matrice di oggetti, ma modificare solo quelli esistenti. Se siamo in grado di utilizzare le utilità angularjs per farlo o sottolineare la libreria, entrambi vanno bene per me. Qualcuno mi può aiutare con questo.

risposta

16

Perché non vanila js con ciclo?

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

o sottolineatura

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

o angolare

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

grazie a @dboskovic per l'angolare – Artiom

+0

Artiom, ho accettato la risposta ma piccola nota, quando do item.itemHr = 25, non funziona invece se do item [itemHr] = 25, funziona bene –

+0

@MadasuK non so perché non ha funzionato per te Controllare il campione – Artiom

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