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

Question

我在 Angular 应用程序中输入了员工信息。

有一个输入类型=数字，它接受一个数字(假设是员 worker 数)。当用户输入 ex: 3 的数字时，UI 需要动态填充 UI 中的 3 行表(显然，我们需要在此处对 numberOfEmployees 进行 ng-repeat)。每行都应该绑定(bind)到一个带有名称的员工对象。

所以，我绑定(bind)到 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"
      }
    ]
}

View 中的input type=number 应绑定(bind)到numberOfEmployees。网格应绑定(bind)到 employees 数组。

我想我必须在 numberOfEmployees 上设置一个监视，并进行推送，拼接到员工数组中。但当你想到这样的事情时，逻辑很快就会变得不可靠，

1. 用户输入 2 作为数字，在员工网格中填写数据，然后返回并将数字更改为 3 或 1，现在您需要在每次数字变化时调整数组，找出哪个要删除的数组项以及在何处添加新项等。

如何以规定的 Angular 优雅地解决这个问题？

Answer 1

您的设计受到多大限制？通常，当我处理需要动态增长的表单时，我会添加一个“添加员工”按钮。每次单击时都会添加一行。通过使网格中的更改更加精细，您可以降低复杂性。

当前用户界面:

假设您被 UI 困住了，您确实可以在 Controller 中使用 $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>

Controller :

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();
  });
});

替代用户界面:

该解决方案看起来类似于以下内容。当我有时间时我会发布一个 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>

Controller :

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);
    }
  };

});