133 votes

Sélectionnez lors de l’initialisation avec AngularJS et ng-repeat

J'essaie de faire une sélection à partir d'une option de pré-sélectionné en utilisant AngularJS 1.1.5 et ng-repeat. Au lieu de l'sélectionnez commence toujours si rien n'est sélectionné. Il dispose également d'une option vide, que je ne veux pas, mais je pense que c'est un des effets secondaires de rien d'être sélectionné.

Je peux obtenir ce travail à l'aide de ng-options au lieu de ng-repeat, mais je veux l'utiliser ng-repeat pour ce cas. Bien que mon rétréci vers le bas n'est pas le montrer, je souhaite mettre l'attribut title de chaque option, et il n'y a aucun moyen de le faire qu'à l'aide de ng-options, pour autant que je sais.

Je ne pense pas que ce soit lié à la commune AngularJs et la portée de l'héritage par prototype question. Au moins, je ne vois pas ce qu'évident lors de l'inspection dans le Batarang. De Plus, lorsque vous choisissez une option dans le sélectionner avec l'INTERFACE utilisateur, le modèle n'est mise à jour correctement.

Voici le code HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

Et le JavaScript:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

Et la JS Fiddle: http://jsfiddle.net/coverbeck/FxM3B/2/

Merci pour toute aide,

Charles

224voto

zsong Points 20492

Bien. Si vous ne voulez pas utiliser le bon sens , vous pouvez ajouter attribut avec une logique de contrôle d’État pour le `` directive à pour faire fonctionner le pre-Selection.

Working Demo

34voto

Jeremy Likness Points 3519

Pour la balise select, angulaire offre la directive ng-options. Il vous donne le cadre spécifique afin de configurer les options et définir une valeur par défaut. Voici le violon mis à jour à l’aide des options-ng qui fonctionne comme prévu : http://jsfiddle.net/FxM3B/4/

Mise à jour de HTML (le code reste le même)

9voto

Charles O. Points 493

Grâce à TheSharpieOne pour souligner la ng-option sélectionnée. Si cela avait été présenté comme étant une réponse plutôt que comme un commentaire, je me serais fait que la réponse correcte.

Voici un travail JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/.

J'ai aussi mis à jour le violon à l'utilisation de l'attribut title, que j'avais laissé dans mon post original, puisqu'il n'était pas la cause du problème (mais c'est la raison pour laquelle je tiens à utiliser ng-repeat au lieu de ng-options).

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

JS:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

1voto

shaunhusain Points 10933

Comme suggéré vous suffit d’utiliser ng-options et, malheureusement, je pense que vous devez référencer l’élément de tableau pour la valeur par défaut (sauf si le tableau est un tableau de chaînes).

http://jsfiddle.net/FxM3B/3/

Le JavaScript :

Le code HTML :

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X