[angularjs] 숫자 및 범위가있는 AngularJS For 루프
Angular는 HTML 지시문 내에서 숫자를 사용하여 for 루프를 지원합니다.
<div data-ng-repeat="i in [1,2,3,4,5]">
do something
</div>그러나 범위 변수에 동적 숫자가 포함 된 범위가 포함되어 있으면 매번 빈 배열을 만들어야합니다.
컨트롤러에서
var range = [];
for(var i=0;i<total;i++) {
range.push(i);
}
$scope.range = range;HTML에서
<div data-ng-repeat="i in range">
do something
</div>이것은 작동하지만 루프 내에서 범위 배열을 전혀 사용하지 않기 때문에 불필요합니다. 누구든지 최소 / 최대 값의 범위 또는 규칙을 설정하는 것을 알고 있습니까?
다음과 같은 것 :
<div data-ng-repeat="i in 1 .. 100">
do something
</div>답변
나는 이 대답 을 약간 조정 하고이 바이올린을 생각해 냈다 .
다음과 같이 정의 된 필터 :
var myApp = angular.module('myApp', []);
myApp.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var i=0; i<total; i++) {
input.push(i);
}
return input;
};
});반복이 다음과 같이 사용되면 :
<div ng-repeat="n in [] | range:100">
do something
</div>답변
예를 들어 정의 된 두 숫자 사이의 범위를 만들기 위해 더 간단한 버전을 생각해 냈습니다. 5 ~ 15
HTML :
<ul>
<li ng-repeat="n in range(5,15)">Number {{n}}</li>
</ul>컨트롤러 :
$scope.range = function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i <= max; i += step) {
input.push(i);
}
return input;
};답변
평범한 자바 스크립트 외에는 아무것도 없습니다 (컨트롤러가 필요하지 않음).
<div ng-repeat="n in [].constructor(10) track by $index">
{{ $index }}
</div>목업시 매우 유용
답변
나는 조금 더 다른 구문을 생각해 냈고, 조금 더 적합하고 선택적인 하한값을 추가했습니다.
myApp.filter('makeRange', function() {
return function(input) {
var lowBound, highBound;
switch (input.length) {
case 1:
lowBound = 0;
highBound = parseInt(input[0]) - 1;
break;
case 2:
lowBound = parseInt(input[0]);
highBound = parseInt(input[1]);
break;
default:
return input;
}
var result = [];
for (var i = lowBound; i <= highBound; i++)
result.push(i);
return result;
};
});당신이 사용할 수있는
<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>또는
<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>답변
angularjs를 처음 사용하는 사람들을 위해. 인덱스는 $ index를 사용하여 얻을 수 있습니다.
예를 들면 다음과 같습니다.
<div ng-repeat="n in [] | range:10">
do something number {{$index}}
</div>당신이 Gloopy의 편리한 필터를 사용할 때 어느, 인쇄됩니다 :
무언가 번호 0
무언가 번호 1
무언가 번호 2
무언가 번호 3
무언가 번호 4
무언가 번호 5
무언가 번호 6
무언가 번호 7
무언가 번호 (8)
9 번을 해봐
답변
이를 수행하는 간단한 방법은 Underscore.js의 _.range () 메소드를 사용하는 것입니다. 🙂
http://underscorejs.org/#range
// declare in your controller or wrap _.range in a function that returns a dynamic range.
var range = _.range(1, 11);
// val will be each number in the array not the index.
<div ng-repeat='val in range'>
{{ $index }}: {{ val }}
</div>답변
내 사용자 지정 ng-repeat-range지시문을 사용 합니다.
/**
* Ng-Repeat implementation working with number ranges.
*
* @author Umed Khudoiberdiev
*/
angular.module('commonsMain').directive('ngRepeatRange', ['$compile', function ($compile) {
return {
replace: true,
scope: { from: '=', to: '=', step: '=' },
link: function (scope, element, attrs) {
// returns an array with the range of numbers
// you can use _.range instead if you use underscore
function range(from, to, step) {
var array = [];
while (from + step <= to)
array[array.length] = from += step;
return array;
}
// prepare range options
var from = scope.from || 0;
var step = scope.step || 1;
var to = scope.to || attrs.ngRepeatRange;
// get range of numbers, convert to the string and add ng-repeat
var rangeString = range(from, to + 1, step).join(',');
angular.element(element).attr('ng-repeat', 'n in [' + rangeString + ']');
angular.element(element).removeAttr('ng-repeat-range');
$compile(element)(scope);
}
};
}]);HTML 코드는
<div ng-repeat-range from="0" to="20" step="5">
Hello 4 times!
</div>또는 단순히
<div ng-repeat-range from="5" to="10">
Hello 5 times!
</div>또는 단순히
<div ng-repeat-range to="3">
Hello 3 times!
</div>아니면 그냥
<div ng-repeat-range="7">
Hello 7 times!
</div>