AngularJS ng-options创build范围
我正在尝试创build一个select元素,其中包含一个数字1的列表,其中页面是一个variables,这是我拥有的页面数。 我不知道该怎么做的是构造ng-optionsexpression式,以便它能给我所需要的数字。 这是我到目前为止
<select ng-model="page" ng-options="???"></select>
我需要在ng-optionsexpression式中放置什么以便创build我的select
<select> <option value="1">1</option> ... <option value="35">35</option> </select>
我是否需要创build一个函数,返回一个数组数组,并以某种方式使用它,还是有一个更简单的方法来做到这一点?
任何帮助将不胜感激。
谢谢
编辑
发布我的问题后,我想出了一种方法来做到这一点,通过在我的控制器中创build一个名为范围的函数,它采用两个数字,并返回一个数组与该范围内的所有值。
$scope.Range = function(start, end) { var result = []; for (var i = start; i <= end; i++) { result.push(i); } return result; };
然后在我做的HTML
<select ng-name="page" ng-options="page for page in Range(1, pages)"></select>
这是最简单的方法吗?还是有更好的方法?
你的方式正常工作。 另一个选项是使用filter,所以你不必用Range来污染你的控制器。
JS:
var myApp = angular.module('myApp', []); myApp.filter('range', function() { return function(input, min, max) { min = parseInt(min); //Make string input int max = parseInt(max); for (var i=min; i<max; i++) input.push(i); return input; }; });
HTML:
<select ng-model="page" ng-options="n for n in [] | range:1:30"></select>
例如: http : //jsfiddle.net/N3ZVp/1/
PS在你的主帖中的例子中,你没有把var
放在i
前面。 所以i
在你的例子中被声明为一个全局variables。
请添加ng模型,如下所示
<select ng-model="test" ng-options="n for n in [] | range:1:30"></select>
在这之后,你的例子将在jsfiddle中工作
没有for循环的另一种方法是这样的:
控制器:
$scope.arr = []; $scope.arr.length = count;
视图绑定:
ng-options="arr.indexof(i) for i in arr"
安迪的解决scheme是伟大的,但范围不能倒退。 这是改进版本:
/* * Creates a range * Usage example: <option ng-repeat="y in [] | range:1998:1900">{{y}}</option> */ myApp.filter('range', function() { return function(input, start, end) { start = parseInt(start); end = parseInt(end); var direction = (start <= end) ? 1 : -1; while (start != end) { input.push(start); start += direction; } return input; }; });
另一个解决scheme将其全部保存在您的模板中:
<select> <option ng-repeat="n in [].constructor(10) track by $index+1">{{$index+1}}</option> </select>
捎带马提亚纳斯的答案。 我将其修改为包含范围中的最后一个值:
/* * Creates a range * Usage example: <option ng-repeat="y in [] | range:1998:1900">{{y}}</option> */ .filter('range', function () { return function (input, start, end) { var direction; start = parseInt(start); end = parseInt(end); if (start === end) { return [start]; } direction = (start <= end) ? 1 : -1; while (start != end) { input.push(start); if (direction < 0 && start === end + 1) { input.push(end); } if (direction > 0 && start === end - 1) { input.push(end); } start += direction; } return input; }; });
在CoffeeScript中:
app.filter 'range', -> (input, min, max) -> input.push(i) for i in [parseInt(min)..parseInt(max)]
而HTML:
<select ng-options="n for n in [] | range:1:30"></select>
这是Javascript的要点
如果你想在select中添加一个占位符,那么使用下面给出的解决scheme。 您需要首先像这样定义filter。
<select> <option value="">-- Birth Year --</option> <option ng-repeat="n in [] | range:1900:2000">{{n}}</option> </select>