Question

所以我试图通过在

中键入数字来动态添加和删除输入

<input type="number" min="1" max="20">

我不想让你为我做这件事只是让我知道如何实现它。

Answer 1

您可以将输入放在ng-repeat中，并通过更改第一个输入创建一个数组。

<input type="number"
       ng-model="size"
       ng-change="sizeArray = new Array(size)"
       min="1" 
       max="20">
<input ng-repeat="i in sizeArray track by $index"
       ng-model="inputValues[$index]">

您的作用域中的输入值数组最终会在输入大小发生变化时保持不变。

Answer 2

这是让你开始的一种方法..

＆＃13;

(function() {
  var app = angular.module("soDemo", []);
  app.controller("soDemoController", SoDemoController);

  SoDemoController.$inject = ['$scope', '$document'];

  function SoDemoController($scope, $document) {
    var vm = {
      count: 0,
      values: [],
      fillSequence: fillSequence
    };

    $scope.vm = vm;
    return;

    /////////// IMPLEMENATION ////////
    function fillSequence(limit) {
      var sequence = [];
      for (var i = 0; i < limit; i++) {
        sequence.push(i);
      }
      
      return sequence;
    }
  }
})();

＆＃13;

ul {
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="sample" ng-app="soDemo" ng-controller="soDemoController">
  <label>Counter:</label><input ng-model="vm.count" type="number" min="1" max="20">
  <h3>Inputs:</h3>
  <ul>
    <li ng-repeat="i in vm.fillSequence(vm.count)">
      <input ng-model="vm.values[i]" />
    </li>
  </ul>
  <h3>Values:</h3>
  <pre>{{vm.values | json }}</pre>
</div>

＆＃13;

Answer 3

首先使用某个事件处理程序将事件对象传递给事件处理程序，为您的数字输入绑定更改事件。
在事件处理程序中使用event.target.value输入值。
现在创建一个类型为number array的实例变量。
使用您提取的值
来填充该数组
this.inputs= Array.from(Array(parseInt(value)).keys());
现在在html中迭代数组以呈现类似这样的输入

<input type='text' *ngFor="let item of items">

在输入[number] angularjs

3 个答案: