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

Question

Итак, я пытаюсь сделать это довольно просто с помощью 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.

Answer 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's the magic 
    angular.forEach(nowSelected, function(val){ 
     $scope.selectedValues.push(val.id.toString()); 
    }); 
}); 

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

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

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

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