web-dev-qa-db-fra.com

AngularJS sélectionnant plusieurs options

Donc, ce que j'essaie de faire est assez simple avec Vanilla JS, mais j'utilise AngularJS et je voudrais savoir comment le faire de la meilleure façon dans le cadre. Je souhaite mettre à jour les options sélectionnées dans une zone de sélection multiple. Je ne veux ajouter ou supprimer aucune des options. Voici à quoi ressemble mon HTML:

<select multiple>
    <option value="1">Blue</option>
    <option value="2">Green</option>
    <option value="3">Yellow</option>
    <option value="4">Red</option>
</select>

En utilisant le tableau suivant, je voudrais sélectionner/désélectionner par programme les options de cette liste:

[{id:1, name:"Blue"},{id:4, name:"Red"}]

Lorsque je mets ce tableau dans la portée, je veux que la case de sélection désélectionne tout ce qui n'est pas bleu ou rouge et sélectionne Bleu et rouge. La réponse standard que j'ai vue sur les groupes Google est d'utiliser ng-repeat. Cependant, je ne peux pas recréer la liste à chaque fois car la liste des valeurs sélectionnées est incomplète. Pour autant que je sache, AngularJS n'a aucun mécanisme pour cela, et je ne sais pas comment je pourrais le faire sans recourir à jQuery.

javascriptmodel-view-controllerangularjs
19
monitorjbl

ngModel est assez génial! Si vous spécifiez les index en tant que modèle selectedValues

<select multiple ng-model="selectedValues">

construit à partir de votre liste (selected) dans un $watch

$scope.$watch('selected', function(nowSelected){
    // reset to nothing, could use `splice` to preserve non-angular references
    $scope.selectedValues = [];

    if( ! nowSelected ){
        // sometimes selected is null or undefined
        return;
    }

    // here's the magic
    angular.forEach(nowSelected, function(val){
        $scope.selectedValues.Push( val.id.toString() );
    });
});

ngModel les sélectionnera automatiquement pour vous.

Notez que cette liaison de données est unidirectionnelle (selected vers l'interface utilisateur). Si vous souhaitez utiliser le <select> UI pour construire votre liste, je vous suggère de refactoriser les données (ou d'utiliser un autre $watch mais ceux-ci peuvent être coûteux).

Oui, selectedValues doit contenir des chaînes, pas des nombres. (Au moins, ça l'a fait pour moi :)

Exemple complet sur http://jsfiddle.net/JB3Un/

28
PixnBits