Question

我有一个带有“ SALARY”字段的对象的数组。我想使用ng-model管理“ CREDIT”金额。所以我创建一个函数，并与对象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);
  }
});

如何为单个对象一起处理“ ng-repeat”和“ ng-model”？

1 个答案: