Question

我有以下AngularJs代码来根据计数更改项目数。

   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script type="text/javascript">
        var app = angular.module("sub", [], function() {});
        app.controller("my_ctrl", function($scope) {
          $scope.range = function(n) {
            return new Array(n);
          };
          $scope.submit = function() {
            console.log($scope.config);
          };
        });
      </script>
    </head>
    <body ng-app="sub" ng-controller="my_ctrl">
      <form ng-submit="submit()">
        item count:
        <input type="number" min="0" max="10" ng-model="config.no_of_items"/>
        <div ng-repeat="i in range(config.no_of_items) track by $index">
          item name:
          <input name="item" ng-model="config.items[$index]"/>
        </div>
        <input type="submit"></input>
      <form>
    </body>

当我增加计数并添加新项目时，它正在工作。

但是当我减少计数时，输入框的数量会改变，但元素不会从items数组中删除。

我如何实现这一目标？

Answer 1

您可以使用ng-change重写代码。因此，每当您更改输入时，将创建与输入的计数相对应的相同数量的对象，ng-repeat将循环显示此输入。

＆＃13;

var app = angular.module("sub", [], function() {});
app.controller("my_ctrl", function($scope) {
    $scope.range = function(count) {
        $scope.config = {
            items: []
        };
        for (var i = 0; i < count; i++) {
            $scope.config.items.push({});
        }
    };
    $scope.submit = function() {
        console.log($scope.config);
    };
});

＆＃13;

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="sub" ng-controller="my_ctrl">
    <form ng-submit="submit()"> item count:
        <input type="number" min="0" max="10" ng-model="config.no_of_items" ng-change="range(config.no_of_items)" />
        <div ng-repeat="i in config.items track by $index"> item name:
            <input name="item" ng-model="i.name" /> </div>
        <input type="submit" />
        <form>
</body>

＆＃13;

Answer 2

您可以在limitTo上使用有角度的ng-repeat过滤器，该过滤器应该完全符合您的需要。

<div ng-repeat="item in config.items track by $index | limitTo: config.no_of_items">
   item name: <input name="item" ng-model="item" />
</div>

上面的内容可能无法正常工作（因为我使用了Angular 1.x已经有一段时间了），但我会使用它。

AngularJs：在减少计数时从数组中删除元素

2 个答案: