J'ai lu des articles à ce sujet dans d'autres publications, mais je n'ai pas réussi à comprendre.
J'ai un tableau,
$scope.items = [
{ID: '000001', Title: 'Chicago'},
{ID: '000002', Title: 'New York'},
{ID: '000003', Title: 'Washington'},
];
Je veux le rendre comme :
<select>
<option value="000001">Chicago</option>
<option value="000002">New York</option>
<option value="000003">Washington</option>
</select>
Et je veux aussi sélectionner l'option avec ID=000002.
J'ai lu [select][1] et essayé, mais je n'arrive pas à comprendre.
Une chose à noter est que ngModel est nécessaire pour que ngOptions fonctionne... notez le `ng-model="blah"`` qui dit "set $scope.blah to the selected value" ;.
Essayez ceci :
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
Voici d'autres informations tirées de la documentation d'AngularJS (si vous ne les avez pas vues) :
pour les sources de données de type tableau :
- étiquette pour la valeur dans le tableau
- select as label for value in array
- label group by group pour une valeur dans un tableau = sélectionner comme étiquette groupe par groupe pour une valeur dans un tableau
pour les sources de données objet :
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group pour (key, value) dans l'objet
- sélectionner comme étiquette groupe par groupe pour (clé, valeur) dans l'objet
Pour quelques précisions sur les valeurs des balises d'option dans AngularJS :
Lorsque vous utilisez ng-options
, les valeurs des balises d'option écrites par ng-options seront toujours l'index de l'élément du tableau auquel la balise d'option se rapporte. Cela est dû au fait qu'AngularJS vous permet de sélectionner des objets entiers avec des contrôles de sélection, et pas seulement des types primitifs. Par exemple :
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Ce qui précède vous permettra de sélectionner directement un objet entier dans $scope.selectedItem
. Avec AngularJS, vous n'avez pas besoin de vous soucier de ce que contient votre balise d'option. Laissez AngularJS s'en charger ; vous ne devez vous préoccuper que de ce qui se trouve dans votre modèle, dans votre scope.
[Voici un plunker démontrant le comportement ci-dessus, et montrant le HTML écrit] (http://plnkr.co/edit/SxIvt4KThWLtWvh3PnOh?p=preview)
Traitement de l'option par défaut :
Il y a quelques éléments que j’ai omis de mentionner ci-dessus concernant l’option par défaut.
Sélectionner la première option et supprimer l'option vide:
Vous pouvez le faire en ajoutant un simple ng-init
qui définit le modèle (de ng-model
) au premier élément des éléments que vous répétez dans ng-options
:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Note : Cela peut devenir un peu fou si foo
est initialisé correctement à quelque chose de "falsy". Dans ce cas, vous voudrez probablement gérer l'initialisation de foo
dans votre contrôleur.
Personnalisation de l'option par défaut:
C'est un peu différent ; ici, tout ce que vous devez faire est d'ajouter une balise d'option comme enfant de votre select, avec un attribut de valeur vide, puis de personnaliser son texte intérieur :
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Remarque : dans ce cas, l'option "empty" restera en place même si vous sélectionnez une autre option. Ce n’est pas le cas du comportement par défaut des sélections sous AngularJS.
Une option par défaut personnalisée qui se cache après qu'une sélection a été effectuée:
Si vous souhaitez que votre option par défaut personnalisée disparaisse après que vous avez sélectionné une valeur, vous pouvez ajouter un attribut ng-hide à votre option par défaut :
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>
J’apprends AngularJS et j’avais également du mal avec la sélection. Je sais que cette question a déjà reçu une réponse, mais je voulais néanmoins partager un peu plus de code.
Dans mon test, j'ai deux listes : les marques de voitures et les modèles de voitures. La liste des modèles est désactivée jusqu'à ce qu'une marque soit sélectionnée. Si la sélection dans la boîte de liste des marques est ensuite réinitialisée (définie sur 'Select Make' ;), la boîte de liste des modèles redevient désactivée ET sa sélection est également réinitialisée (sur 'Select Model' ;). Les marques sont récupérées en tant que ressource, tandis que les modèles sont simplement codés en dur.
[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]
angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
return $resource('makes.json', {}, {
query: {method:'GET', isArray:true}
});
});
<div ng:controller="MakeModelCtrl">
<div>Make</div>
<select id="makeListBox"
ng-model="make.selected"
ng-options="make.code as make.name for make in makes"
ng-change="makeChanged(make.selected)">
</select>
<div>Model</div>
<select id="modelListBox"
ng-disabled="makeNotSelected"
ng-model="model.selected"
ng-options="model.code as model.name for model in models">
</select>
</div>
function MakeModelCtrl($scope)
{
$scope.makeNotSelected = true;
$scope.make = {selected: "0"};
$scope.makes = Make.query({}, function (makes) {
$scope.make = {selected: makes[0].code};
});
$scope.makeChanged = function(selectedMakeCode) {
$scope.makeNotSelected = !selectedMakeCode;
if ($scope.makeNotSelected)
{
$scope.model = {selected: "0"};
}
};
$scope.models = [
{code:"0", name:"Select Model"},
{code:"1", name:"Model1"},
{code:"2", name:"Model2"}
];
$scope.model = {selected: "0"};
}
Dans CoffeeScript :
#directive
app.directive('select2', ->
templateUrl: 'partials/select.html'
restrict: 'E'
transclude: 1
replace: 1
scope:
options: '='
model: '='
link: (scope, el, atr)->
el.bind 'change', ->
console.log this.value
scope.model = parseInt(this.value)
console.log scope
scope.$apply()
)
<!-- HTML partial -->
<select>
<option ng-repeat='o in options'
value='{{$index}}' ng-bind='o'></option>
</select>
<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>
<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>