根据用户在UI中输入的数字创建动态数组(绑定到网格)

Question

我已经将员工信息输入到了一个有角度的应用程序中。

得到一个输入type=number，它接受一个数字(比如员工的数量)。当用户输入ex: 3的数字时，UI需要动态地填充UI中3行的表(我们显然需要在numberOfEmployees上进行ng-重复)。每一行都应绑定到具有名称的employee对象。

因此，绑定到UI的json对象如下所示，

{
  numberOfEmployees : null,
  "employees" : [
      {
        firstName: "set from view",
        lastName: "set from view",
        amount: "set from view"
      },
      {
        firstName: "set from view",
        lastName: "set from view",
        amount: "set from view"
      }
    ]
}

视图中的输入type=number应该绑定到type=number网格应该绑定到employees数组。

我想我必须在numberOfEmployees上设置一个手表，然后按下，插入到员工数组中。但是当你想到这样的事情时，逻辑就变得不太稳定了，

1. 用户输入2作为数字，在employees网格中填充数据，然后返回并将数字更改为3或1，现在您需要在每次数字更改时调整数组，确定要删除的数组项以及添加新项的位置等等。

如何用角度规定的方式优雅地解决这一问题？

Answer 1

你的设计有多大的局限性？通常，当我接近需要动态增长的表单时，我会添加一个"add“按钮。它每次单击时都会添加一行。通过使网格中的更改变得更细粒度，您可以降低复杂性。

当前UI:

假设您被困在UI中，您确实可以在控制器中使用一个$scope.$watch。

还可以使用ng-change="updateEmployees()"将处理程序附加到输入本身。

模板：

<input type="number" ng-model="numOfEmployees">
<table ng-controller="EmployeesCtrl">
  <tr ng-repeat="employee in employees">
    <td><input type="text" ng-model="employee.firstName"></td>
    <td><input type="text" ng-model="employee.lastName"></td>
    <td><input type="text" ng-model="employee.amount"></td>
  </tr>
</table>

主计长：

angular.module('curExample')

.controller('EmployeesCtrl', function () {

  $scope.employees = [];
  $scope.numOfEmployees = 0;

  $scope.addEmployee = function() {
    $scope.employees.push({
      firstName: "",
      lastName: "",
      amount: ""
    });
  };


  $scope.removeEmployees = function(start, count) {
    if (start > -1) {
      $scope.employees.splice(start, count);
    }
  };

  $scope.updateEmployees = function () {
    var newNum = $scope.numOfEmployees,
        curNum = $scope.employees.length;

    if(!newNum || newNum === curNum) return; 

    if(newNum > curNum) {
      for(var i = 0; i < (newNum - curNum); i++) {
        $scope.addEmployee();
      }
    } else {
      $scope.removeEmployees(curNum - 1, curNum - newNum);
    }
  };

  $scope.$watch('numOfEmployees', function (newValue) {
    $scope.updateEmployees();
  });
});

替代UI:

此解决方案看起来类似于以下内容。我有空的时候会发JSFiddle的

模板：

<table ng-controller="EmployeesCtrl">
  <tr ng-repeat="employee in employees">
    <td><input type="text" ng-model="employee.firstName"></td>
    <td><input type="text" ng-model="employee.lastName"></td>
    <td><input type="text" ng-model="employee.amount"></td>
    <td><button ng-click="removeEmployee($index)">Remove</button></td>
  </tr>
</table>

<button ng-click="addEmployee()">Add Employee</button>

主计长：

angular.module('altExample')

.controller('EmployeesCtrl', function () {

  $scope.employees = [];

  $scope.addEmployee = function() {
    $scope.employees.push({
      firstName: "",
      lastName: "",
      amount: ""
    });
  };


  $scope.removeEmployee = function(index) {
    if (index > -1) {
      $scope.employees.splice(index, 1);
    }
  };

});