AngularJng-옵션으로 범위 작성

AngularJng-옵션으로 범위 작성

페이지 수가 변수인 페이지 1~페이지 목록이 있는 선택 요소를 작성하려고 합니다.ng-options 식을 구성해서 필요한 숫자를 얻을 수 있도록 하는 방법을 모르겠습니다.지금까지 제가 가지고 있는 것은 다음과 같습니다.

<select ng-model="page" ng-options="???"></select>

ng-options 식에 무엇을 넣어야 제 선택을 만들 수 있을까요?

<select>
    <option value="1">1</option>
    ...
    <option value="35">35</option>
</select>

숫자 배열을 반환하는 함수를 만들어 어떻게든 사용할 필요가 있습니까?아니면 더 쉬운 방법이 있을까요?

어떤 도움이라도 주시면 대단히 감사하겠습니다.

감사해요.

편집

질문 투고 후 컨트롤러에 레인지라는 함수를 만들어 두 개의 숫자를 가져와서 그 범위의 모든 값을 가진 배열을 반환하는 방법을 알아냈습니다.

$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> 

이것이 가장 간단한 방법입니까, 아니면 더 나은 방법이 있습니까?

네 방식은 잘 된다.또 다른 방법은 필터를 사용하는 것입니다.그러면 컨트롤러를 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/

추신: 메인 포스트의 예에서는var앞에i.그렇게i이 예에서는 글로벌 변수로 선언되어 있습니다.

모든 것을 템플릿에 보관하기 위한 다른 솔루션:

<select>
  <option ng-repeat="n in [].constructor(10) track by $index+1">{{$index+1}}</option>
</select>

아래와 같이 ng-model을 추가해 주세요.

<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"

앤디의 해결책은 훌륭하지만, 그 범위는 거꾸로 갈 수 없습니다.개량된 버전은 다음과 같습니다.

/* 
 * 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;
  };
});

마티나의 대답에 기대고 있어범위의 마지막 값을 포함하도록 수정했습니다.

/*
 * 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>
    <option value="">-- Birth Year --</option>
    <option ng-repeat="n in [] | range:1900:2000">{{n}}</option>
</select>

언급URL : https://stackoverflow.com/questions/11160513/angularjs-ng-options-create-range