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 Groups 上看到的标准响应是使用 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> UI 来构建您的列表，我建议重构数据（或使用另一个$watch，但这些可能很昂贵）。

是的，selectedValues 需要包含字符串，而不是数字。 （至少它对我有用：）

http://jsfiddle.net/JB3Un/ 上的完整示例