AngularJS выбор нескольких опций

Итак, то, что я пытаюсь сделать, довольно просто с vanilla JS, но я использую AngularJS, и я хотел бы знать, как сделать это наилучшим образом в рамках. Я хочу обновить выбранные параметры в окне множественного выбора. Я не хочу добавлять или удалять любые варианты. Вот как выглядит мой HTML:

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

Используя следующий массив, я хотел бы программно выбрать/отменить выбор из этого списка:

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

Когда я устанавливаю этот массив в области видимости, я хочу, чтобы поле выбора отменило выбор всего, что не является синим или красным, и выберите "Синий" и "Красный". Стандартный ответ, который я видел в группах Google, - это использовать ng-repeat. Однако я не могу воссоздавать список каждый раз, потому что список выбранных значений является неполным. Насколько я могу судить, у AngularJS нет механизма для этого, и я не понимаю, как это сделать, не прибегая к использованию jQuery.

Ответы

Ответ 1

ngModel - это довольно удивительно! Если вы укажете индексы в качестве модели selectedValues

<select multiple ng-model="selectedValues">

построенный из вашего списка (selected) в $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 the magic
    angular.forEach(nowSelected, function(val){
        $scope.selectedValues.push( val.id.toString() );
    });
});

ngModel автоматически выберет их для вас.

Обратите внимание, что привязка данных является однонаправленной (selected to UI). Если вы хотите использовать пользовательский интерфейс <select> для создания своего списка, я бы предложил рефакторинг данных (или используя другой $watch, но они могут быть дорогими). ​​

Да, selectedValues должен содержать строки, а не числа. (По крайней мере, это было для меня:)

Полный пример в http://jsfiddle.net/JB3Un/