是否有一种方法可以ng-repeat定义的次数，而不是总是要迭代一个数组?
例如，下面我希望列表项显示5次，假设为$scope。数字等于5，加上增加的数字，所以每个列表项都增加，如1,2,3,4,5
预期的结果:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
当前回答
Angular提供了一个非常可爱的函数slice..使用它你可以达到你想要的效果。 例如ng-repeat="ab in abc.slice(startIndex,endIndex)"
这个演示:http://jsfiddle.net/sahilosheal/LurcV/39/将帮助你，并告诉你如何使用这个“让生活更简单”的功能。：）
html:
<div class="div" ng-app >
<div ng-controller="Main">
<h2>sliced list(conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
<h2>unsliced list( no conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
</div>
CSS:
ul
{
list-style: none;
}
.div{
padding:25px;
}
li{
background:#d4d4d4;
color:#052349;
}
ng-JS:
function ctrlParent ($scope) {
$scope.abc = [
{ "name": "What we do", url: "/Home/AboutUs" },
{ "name": "Photo Gallery", url: "/home/gallery" },
{ "name": "What we work", url: "/Home/AboutUs" },
{ "name": "Photo play", url: "/home/gallery" },
{ "name": "Where", url: "/Home/AboutUs" },
{ "name": "playground", url: "/home/gallery" },
{ "name": "What we score", url: "/Home/AboutUs" },
{ "name": "awesome", url: "/home/gallery" },
{ "name": "oscar", url: "/Home/AboutUs" },
{ "name": "american hustle", url: "/home/gallery" }
];
}
function Main($scope){
$scope.items = [{sort: 1, name: 'First'},
{sort: 2, name: 'Second'},
{sort: 3, name: 'Third'},
{sort: 4, name:'Last'}];
}
其他回答
你可以用这个例子。
在控制器:
$scope.data = {
'myVal': 33,
'maxVal': 55,
'indexCount': function(count) {
var cnt = 10;
if (typeof count === 'number') {
cnt = count;
}
return new Array(cnt);
}
};
在HTML代码端选择元素的例子:
<select ng-model="data.myVal" value="{{ data.myVal }}">
<option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>
对于使用CoffeeScript的用户，您可以使用范围理解:
指令
link: (scope, element, attrs) ->
scope.range = [1..+attrs.range]
或控制器
$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer
模板
<div ng-repeat="i in range">[ the rest of your code ]</div>
我需要一个更动态的解决方案-我可以增加重复。
超文本标记语言
<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>
复印机控制
<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>
JS
$scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
primaryValue++;
$scope.newUserCount.push(primaryValue)
}
Angular提供了一个非常可爱的函数slice..使用它你可以达到你想要的效果。 例如ng-repeat="ab in abc.slice(startIndex,endIndex)"
这个演示:http://jsfiddle.net/sahilosheal/LurcV/39/将帮助你，并告诉你如何使用这个“让生活更简单”的功能。：）
html:
<div class="div" ng-app >
<div ng-controller="Main">
<h2>sliced list(conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
<h2>unsliced list( no conditional NG-repeat)</h2>
<ul ng-controller="ctrlParent">
<li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
</ul>
</div>
CSS:
ul
{
list-style: none;
}
.div{
padding:25px;
}
li{
background:#d4d4d4;
color:#052349;
}
ng-JS:
function ctrlParent ($scope) {
$scope.abc = [
{ "name": "What we do", url: "/Home/AboutUs" },
{ "name": "Photo Gallery", url: "/home/gallery" },
{ "name": "What we work", url: "/Home/AboutUs" },
{ "name": "Photo play", url: "/home/gallery" },
{ "name": "Where", url: "/Home/AboutUs" },
{ "name": "playground", url: "/home/gallery" },
{ "name": "What we score", url: "/Home/AboutUs" },
{ "name": "awesome", url: "/home/gallery" },
{ "name": "oscar", url: "/Home/AboutUs" },
{ "name": "american hustle", url: "/home/gallery" }
];
}
function Main($scope){
$scope.items = [{sort: 1, name: 'First'},
{sort: 2, name: 'Second'},
{sort: 3, name: 'Third'},
{sort: 4, name:'Last'}];
}
这只是对公认答案的轻微变化，但实际上不需要创建新函数。仅在作用域中导入Array:
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<ul>
<li ng-repeat="i in counter(5) track by $index">
<span>{{$index+1}}</span></li>
</ul>
</div>
</div>
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber = 5;
$scope.counter = Array;
});
这把小提琴就是一个活生生的例子。
