如何处理单个对象的“ng-repeat”和“ng-model”。？

Question

我有一个包含“SALARY”字段的对象数组。我想使用 ng-model 管理“信用”金额。所以我正在创建一个函数并使用对象 ID 正常工作。但在我的情况下，当我更改任何输入字段的值时，它会更改所有输入的值。

请任何人告诉我如何更改输入值只需要输入字段。

这是我的html>

<div ng-repeat="obj in myObj">
   {{obj.id}} /  
   {{obj.name}} / 
   {{obj.salary}} /
   <input type="text" ng-model="credit.amount" />
   <button ng-click="updateBalance(obj)">Balance</button>
</div> 

这是我的脚本>

 var app = angular.module('myApp',[]);
    app.controller('employee', function($scope) {
      $scope.myObj = [
        { "id" : 1, "name" : "abc", "salary" : 10000 },
        { "id" : 2, "name" : "xyz", "salary" : 15000 }
      ]

      $scope.credit = {"amount" : 0};

      $scope.updateBalance = function(obj){
        console.log(obj.name + "'s current balance is : ");
        console.log(obj.salary - Number($scope.credit.amount));
      }
});

这是我的PLNKR LINK。

Answer 1

所有输入字段中的值都在发生变化，因为您将$scope.credit.amount 绑定到所有这些字段。相反，您需要单独维护它们。以下应该工作：

HTML

<tr ng-repeat="obj in myObj">
  <td>{{obj.id}} </td>
  <td>{{obj.name}} </td>
  <td>{{obj.salary}} </td>
  <td>
    <input type="number" ng-model="credits[obj.id].amount" />
  </td>
  <td>
    <button ng-click="updateBalance(obj)">Balance</button>
  </td>
</tr>

控制器

var app = angular.module('myApp', []);

app.controller('employee', function($scope) {
  $scope.myObj = [{
    "id": 1,
    "name": "abc",
    "salary": 10000
  }, {
    "id": 2,
    "name": "xyz",
    "salary": 15000
  }]

  $scope.credits = $scope.myObj.reduce(function(acc, object) {
    acc[object.id] = { amount: 0 };

    return acc;
  }, {});

  $scope.updateBalance = function(obj) {
    var balance = obj.salary - Number($scope.credits[obj.id].amount)
    alert(obj.name + ' balance is : ' + balance);
  }
});