AngularJS ng-options créer de gamme

Je suis en train de créer un élément select a une liste de numéros de 1 à pages où les pages est une variable qui est le nombre de pages que j'ai. Ce que je ne sais pas comment faire c'est la structure de la ng-options expression qui va me donner les chiffres que j'ai besoin. Voici ce que j'ai jusqu'à présent

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

que dois-je mettre dans le ng-options expression pour créer mon sélectionnez comme

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

dois-je créer une fonction qui retourne un tableau de nombres et les utiliser, il y a en quelque sorte ou est-il un moyen plus facile de faire cela?

toute aide serait grandement appréciée.

Grâce

MODIFIER

Après la publication de ma question, j'ai pensé à une façon de le faire par la création d'une fonction appelée Gamme dans mon contrôleur qui prend deux nombres et retourne un tableau avec toutes les valeurs de cette gamme.

$scope.Range = function(start, end) {
    var result = [];
    for (var i = start; i <= end; i++) {
        result.push(i);
    }
    return result;
};

puis dans le HTML, je n'ai

<select ng-name="page" ng-options="page for page in Range(1, pages)"></select>

Est-ce la façon la plus simple de le faire ou est-il un meilleur moyen?

C'est un savant salon de truc, mais pourquoi ne pas simplement utiliser un code HTML d'entrée de type de numéro? Vous pouvez même spécifier une plage.

InformationsquelleAutor d_boggus | 2012-06-22

angularjs

80

Votre façon fonctionne très bien. Une autre option qui est venu à ma tête est d'utiliser un filtre, de sorte que vous n'avez pas à polluer votre contrôleur de Gamme.

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>
```
Exemple: http://jsfiddle.net/N3ZVp/1/

P. S. dans votre exemple, votre poste principal, vous n'avez pas mis var en face de i. Donc i est déclarée comme une variable globale dans votre exemple.
- C'est joli, mais comment puis-je utiliser le filtre dans la ng-options? J'ai environ 1300 pages donc je ne peux pas vous les énumérer tous, et j'ai besoin d'être capable de sauter à n'importe quelle page en utilisant un élément select est ma seule véritable option. Fixe la variable non déclarée dans ma pour stmt.
- J'ai juste modifié la manière d'utiliser le filtre en ng-options.
- J'ai essayé en jsfiddle et ça ne fonctionne pas. http://jsfiddle.net/J4AYh/. Edit: Cependant, j'ai été en mesure de le faire fonctionner sur ma page. Pourriez-vous faire un exemple de travail sur jsfiddle?
- Je ne sais pas pourquoi cela ne fonctionne pas. Je suppose que votre fonction est la meilleure.
- Bien que votre filtre méthode a fonctionné sur mon site, je ne pouvais tout simplement pas l'obtenir pour travailler dans jsfiddle qui j'ai bien étrange. Je n'ai pas utilisé jsfiddle beaucoup donc je n'étais pas sûr si c'était juste moi de faire quelque chose de mal ou pas. Merci pour votre réponse.
- J'ai écrit une belle version en CoffeeScript: gist.github.com/Dorian/311c7563fe6af6563d6f
- La gamme de votre jsfiddle exemple est compris (i<=max vs i<max), qui fait plus de sens pour moi. Si le code dans cette réponse, être modifiée pour correspondre?
InformationsquelleAutor Andrew Joslin
11

Une autre solution pour le garder dans votre modèle:
```
<select>
  <option ng-repeat="n in [].constructor(10) track by $index+1">{{$index+1}}</option>
</select>
```
- À l'aide de [].constructor au lieu de la fantaisie "de la gamme" décideurs est soignée.
- fonctionne comme un charme! Merci!!!!
- c'est le retour d'une option unique qui est NaN comment résoudre ce problème, je suis en utilisant angulaire 5
InformationsquelleAutor Adam Boostani
8

S'il vous plaît ajouter ng-model, comme ci-dessous
```
<select ng-model="test" ng-options="n for n in [] | range:1:30"></select>
```
Après cela, votre exemple de travail en jsfiddle

InformationsquelleAutor user2003449
7

une autre approche en l'absence d'une boucle for est: est-ce

contrôleur:
```
 $scope.arr = [];
 $scope.arr.length = count;
```
vue de liaison:
```
 ng-options="arr.indexof(i) for i in arr"
```
- Corrigez-moi si je me trompe, mais cela ne fonctionne que si vous voulez commencer à 0.
- vous pouvez toujours faire "arr.indexof(i)+1 for i in arr"
- c'est intelligent !...
InformationsquelleAutor CodeToad

Andy solution est grand, cependant, la gamme ne peut pas revenir en arrière. Voici la version améliorée:

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

C'est la meilleure réponse.
Cela supprime la dernière valeur de la plage: jsfiddle.net/4thp9k27/2
Voir mon édition de ce dessous de laquelle la dernière valeur de la plage de

InformationsquelleAutor martynas

Profiteurs martynas de réponse. Je l'ai modifié pour inclure la dernière valeur dans la gamme:

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

Presque parfait, mais renvoie tableau vide si start=fin. Ajoutez le code suivant après le parseInts à corriger: if(start===end) return [start];
ajouté votre suggestion de modifier.

InformationsquelleAutor johnnyarguelles

En CoffeeScript:

app.filter 'range', ->
  (input, min, max) ->
    input.push(i) for i in [parseInt(min)..parseInt(max)]

Et le code HTML:

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

Ici est la gist avec le Javascript

InformationsquelleAutor Dorian

0

Si vous voulez ajouter un espace réservé dans le sélectionner, puis utiliser la solution donnée ci-dessous. Vous devez d'abord définir le filtre comme ceci.
```
<select>
    <option value="">-- Birth Year --</option>
    <option ng-repeat="n in [] | range:1900:2000">{{n}}</option>
</select>
```
InformationsquelleAutor Xyroid

Vous devez vous connecter pour publier un commentaire.