基于用户在UI中输入的数字创建动态数组(绑定到网格）

Dynamic array creation (bound to a grid) based on a user entered number in the UI

本文关键字：数字 动态 创建 数组 绑定 网格 于用户 用户 UI 输入      更新时间：2023-09-26

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

得到一个输入类型=接受数字的数字（比如说员工人数）。当用户为ex:3输入一个数字时，UI需要动态地在UI中填充一个由3行组成的表（显然，我们需要在这里重复numberOfEmployees）。每一行都应绑定到一个具有名称的员工对象。

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

视图中的inputtype=number应绑定到numberOfEmployees。网格应绑定到员工数组。

我想我必须在员工人数上设置一个手表，然后进行推送，拼接到员工数组中。但当你想到这样的事情时，逻辑很快就会变得不稳定

  1. 用户输入2作为数字，在员工网格中填写数据，然后返回并将数字更改为3或1，现在每次数字更改时都需要调整数组，弄清楚要删除哪个数组项以及在哪里添加新项等

如何以一种有角度的规定方式优雅地解决这个问题

您在设计中的约束程度如何？通常，当我处理一个需要动态增长的表单时，我会添加一个"添加员工"按钮。它每次单击都会添加一行。通过使网格中的更改更加精细，可以降低复杂性。

当前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);
    }
  };
});
相关文章：