42

ページが私が持っているページの数である変数であるページへの番号1のリストを持つselect要素を作成しようとしています。どうすればよいかわからないのは、必要な数値が得られるように ng-options 式を構造化することです。これが私がこれまでに持っているものです

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

次のような選択を作成するには、ng-options式に何を入れる必要がありますか

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

数値の配列を返す関数を作成してそこで使用する必要がありますか、またはこれを行う簡単な方法はありますか?

どんな助けでも大歓迎です。

ありがとう

編集

質問を投稿した後、コントローラーで Range という関数を作成して、2 つの数値を取り、その範囲内のすべての値を含む配列を返す方法を見つけました。

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

これはこれを行う最も簡単な方法ですか、それともより良い方法がありますか?

4

8 に答える 8

82

あなたのやり方はうまくいきます。私の頭に浮かんだ別のオプションは、フィルターを使用することです。これにより、コントローラーを範囲で汚染する必要がなくなります。

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の例ではグローバル変数として宣言されています。

于 2012-06-22T17:36:05.670 に答える
8

以下のように ng-model を追加してください

<select ng-model="test" ng-options="n for n in [] | range:1:30"></select>

この後、あなたの例はjsfiddleで動作します

于 2013-01-23T10:07:51.353 に答える
7

for ループを使用しない別のアプローチは次のとおりです。

コントローラ：

 $scope.arr = [];
 $scope.arr.length = count;

ビューバインディング:

 ng-options="arr.indexof(i) for i in arr"
于 2014-01-29T22:19:24.773 に答える
7

アンディの解決策は素晴らしいですが、範囲を元に戻すことはできません。改善されたバージョンは次のとおりです。

/* 
 * 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;
  };
});
于 2014-05-28T11:28:57.217 に答える
5

マルティナスの答えに便乗。範囲内の最後の値を含めるように変更しました。

/*
 * 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;
    };
});
于 2015-05-28T05:48:52.073 に答える
0

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の要点です

于 2014-06-18T22:33:17.157 に答える
0

選択にプレースホルダーを追加する場合は、以下の解決策を使用してください。最初にこのようにフィルターを定義する必要があります。

<select>
    <option value="">-- Birth Year --</option>
    <option ng-repeat="n in [] | range:1900:2000">{{n}}</option>
</select>
于 2016-11-24T14:38:57.737 に答える