Question

我尝试创建一个输入数字，提供循环span代码like

的总数

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:{{number}}"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

这是我的JS

var app = angular.module('myApp', []);

function myCtrl($scope){
}    

app.filter('range', function() {
  return function(val, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      val.push(i);
    return val;
  };
});

但那不起作用。如何做到这一点，谢谢

Answer 1

您不必在{{number}}指令中插入ng-repeat，您可以直接使用它。

变化：

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:{{number}}"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

为：

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range:number"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

Answer 2

将表达式{{number}}替换为number中的模型range filter。更新的代码：

<div ng-app='myApp' ng-controller="myCtrl">
    <input type="number" ng-model="number"> 
    <li ng-repeat="n in [] | range: number"><span class="glyphicon glyphicon-star" >{{n}}</span></li>
</div>

AngularJS - 具有动态总数的循环数据

2 个答案: