在 ng-repeat 中使用输入值

Question

我在让它工作时遇到了一些麻烦。我在模态框内有一个表单，我想根据用户在上面输入的数字生成一些输入。

<form ng-submit="saveNewCategory(cat)">
      <div class="list">
        <label class="item item-input">
        <span class="input-label"><strong>Name:</strong></span>
          <input type="text" value="" placeholder="Hw" ng-model="cat.title">
        </label>
         <label class="item item-input">
        <span class="input-label"><strong>Number of {{cat.title}}</strong></span>
          <input type="tel" value="" ng-model="cat.number">
        </label>
        <!-- PROBLEM IS HERE -->
        <label class="item item-input" ng-repeat="i in range(cat.number)">
        <span class="input-label"><strong>blah</strong></span>
        <input type="tel" value="" >
        </label>
        <label class="item item-input">
        <span class="input-label"><strong>Total Points:</strong></span>
          <input type="tel" value="" ng-model="cat.total">
        </label>
        <label class="item item-input">
        <span class="input-label"><strong>Weight:</strong></span>
          <input type="tel" value="" ng-model="cat.weight">
        </label>
      </div>
      <div class="padding">
        <button type="submit" class="button button-block button-positive">Save</button>
      </div>
    </form>

在我的控制器中，范围函数是

$scope.range = function(n) {
    return new Array(n);
};

那么为什么这不起作用？只生成一个输入元素。在 ng-repeat 中不能使用表单模型对象值吗？

感谢您的所有帮助！

Answer 1

目前，您的$scope.range 函数正在创建一个新数组，其字符串表示为val，这意味着它永远只有一个元素（值本身）。相反，请尝试：

$scope.range = function(n) {
  return new Array(Number(n));
}

然后，由于您将拥有一个未定义元素的数组，您将需要使用track by 选项：

<label ng-repeat="i in range(cat.number) track by $index">

或者，或者，保留现有标记，但更改 $scope.range 以创建递增数字数组：

$scope.range = function(n) {
   return Array.apply(null, {length: n}).map(Number.call, Number);
}