J’essaie de faire en sorte que la boîte de sélection commence par une option pré-remplie en utilisant ng-repeat avec AngularJS 1.1.5. Au lieu de cela, la sélection démarre toujours sans rien de sélectionné. Il y a également une option vide, ce que je ne veux pas. Je pense qu'il y a un effet secondaire à ce que rien ne soit sélectionné.
Je peux faire fonctionner ce système en utilisant ng-options au lieu de ng-repeat, mais je veux utiliser ng-repeat dans ce cas. Bien que mon exemple réduit ne le montre pas, je veux également définir l'attribut de titre de chaque option, et il n'y a aucun moyen de le faire en utilisant ng-options, pour autant que je sache.
Je ne pense pas que cela soit lié au problème commun d'AngularJs concernant la portée et l'héritage prototypique. En tout cas, je ne vois rien d'évident en inspectant dans Batarang. De plus, lorsque vous choisissez une option dans la sélection avec l'interface utilisateur, le modèle se met à jour correctement.
Voici le 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'}
]
}
JS Fiddle pour cela : [
][1][1] :
Pour la balise select, Angular fournit la directive ng-options. Elle vous donne le cadre spécifique pour configurer les options et définir une valeur par défaut. Voici la mise à jour de l'astuce utilisant ng-options qui fonctionne comme prévu :
HTML mis à jour (le code reste le même)
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>
Merci à [TheSharpieOne][1] d'avoir signalé l'option ng-selected. Si cela avait été posté comme une réponse plutôt que comme un commentaire, j'en aurais fait la réponse correcte.
Voici un JSFiddle fonctionnel : [
][2].J'ai également mis à jour le JSFiddle afin d'utiliser l'attribut title, que j'avais omis dans mon message initial, car il n'était pas à l'origine du problème (mais c'est la raison pour laquelle je veux 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'}
]
}
[1] : https://stackoverflow.com/users/1873485/thesharpieone [2] :
Comme suggéré, vous devez utiliser ng-options et, malheureusement, je crois que vous devez référencer l'élément du tableau pour un défaut (à moins que le tableau ne soit un tableau de chaînes).
Le JavaScript :
function AppCtrl($scope) {
$scope.operators = [
{value: 'eq', displayName: 'equals'},
{value: 'neq', displayName: 'not equal'}
]
$scope.filterCondition={
operator: $scope.operators[0]
}
}
Le HTML :
<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>