AngularJS选择多个选项

一尘不染

AngularJS选择多个选项

angularjs

所以，我想用香草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的情况下如何做到这一点一无所知。

阅读 234

2020-07-04

共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/

2020-07-04