20

所以，我想要做的对 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 的情况下做到这一点。

4

1 回答 1

29

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/上的完整示例

于 2013-09-11T21:39:52.993 回答