Question

我是Angular的新手，并且难以将 ng-repeat 与 ng-model 一起使用。

我的HTML代码有点像这样：

<form>
    <input type="text" ng-model="no_of_sets" placeholder="number of sets" name="no_of_sets">
    <button>Submit</button>
</form>

<div ng-repeat="a in range(no_of_sets) track by $index">{{no_of_sets}}</div>

我的控制器代码是这样的：

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

我希望用户在文本框中输入一个数字并多次打印他的号码。

但是这段代码似乎不起作用。我哪里错了？

Answer 1

您的代码中发生了什么：创建数组的函数只会给您未定义的次数与用户输入的值相同。您需要一个具有该数字的数组仅重复该次数。

为此您可以这样做：

    <form ng-submit="createArray()">
        <input type="text" ng-model="no_of_sets" placeholder="number of sets" name="no_of_sets">
        <button type="submit">Submit</button>
    </form>
    <br>
    <br>
    <div ng-repeat="a in arr track by $index">{{no_of_sets}}</div>

控制器：

    $scope.createArray = function(){

        $scope.arr = [];

        for (var i=0; i< $scope.no_of_sets; i++){
            $scope.arr.push($scope.no_of_sets);
        };

    };

Answer 2

您的问题是您将字符串传递给函数范围（）。只需将输入类型更改为数字即可！

<input type="text" ... />

更改为

<input type="number" ... />

请参阅Plunker

中的工作示例

Answer 3

将您的range功能更改为：

$scope.range = function(no) {
    var n = parseInt(no);
    return new Array(isNaN(n) ? 0 : n);
};

您的错误是您将string传递给Array()，这会创建一个包含单个元素（传递的字符串）的新数组。要创建一定长度的数组，您应该将数字传递给它。

Answer 4

使用自定义range filter

<input type="number" ng-model="no_of_sets">
<div ng-repeat="n in [] | range:no_of_sets" >{{no_of_sets}}
</div>

angular.module('sampleApp', [])
  .filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});

https://jsfiddle.net/ebinmanuval/u0e67n6k/

如何在ng-repeat中使用ng-model值

4 个答案: