AngularJS选择多个选项 [英] AngularJS selecting multiple options

问题描述

所以，我试图做的是香草JS相当简单，但我使用AngularJS，我想知道如何做到这一点的框架内的最佳途径。我想更新多选择框选定的选项。我不希望添加或删除的任何选项。这里是我的HTML是什么样子：

 ＆LT;选择多＆GT;
    ＆LT;期权价值=1＆GT;蓝色＆LT; /选项＆GT;
    ＆LT;期权价值=2＆GT;绿色＆LT; /选项＆GT;
    ＆LT;期权价值=3→黄色＆LT; /选项＆GT;
    ＆LT;期权价值=4＆GT;红色和LT; /选项＆GT;
＆LT; /选择＆GT;
 

使用下面的数组，我想以编程方式选择/取消从这个名单选项：

  [{ID：1，名称：蓝色}，{ID：4，名称：红}]
 

当我把这个数组的范围，我想选择框以取消选择任何不是蓝色或红色，选择蓝色和红色。我见过在谷歌论坛的标准反应是用NG重复。但是，我不能每次都重新创建列表，因为选择的值的列表是不完整的。据我所知，AngularJS没有机制，这一点，我在茫然，我会怎么做，而不诉诸使用jQuery。

解决方案

ngModel 是pretty真棒！如果指定索引为模型 selectedValues​​

 ＆LT;选择多个NG模型=selectedValues​​＆GT;
 

从列表中（选）中建立了一个 $观看

  $范围。$腕表（'选择'，函数（nowSelected）{
    //重新设置到什么，可以使用`splice`至preserve无棱角引用
    $ scope.selectedValues​​ = [];    如果（！nowSelected）{
        //有时选定为null或undefined
        返回;
    }    //这里的魔法
    angular.forEach（nowSelected，功能（VAL）{
        $ scope.selectedValues​​.push（val.id.toString（））;
    }）;
}）;
 

ngModel会自动选择它们。

请注意，此数据绑定是单向的（选来UI）。如果你想使用＆LT;选择＆GT; UI来建立您的清单，我建议重构的数据（或者使用其他 $手表，但这些可能是昂贵的）。

是 selectedValues​​ 需要包含字符串，而不是数字。 （至少它为我做的：）

在 http://jsfiddle.net/JB3Un/

完整的示例

So, What I'm trying to do is fairly simple with vanilla JS, but I'm using AngularJS and I would like to know how to do it the best way within the framework. I want to update the selected options in a multiple select box. I do not want to add or remove any of the options. Here is what my HTML looks like:

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

Using the following array, I'd like to programmatically select/deselect options from this list:

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

When I set this array in the scope, I want the select box to deselect anything that is not Blue or Red and select Blue and Red. The standard response that I've seen on the Google Groups is to use ng-repeat. However, I can't recreate the list every time because the list of selected values is incomplete. As far as I can tell, AngularJS has no mechanism for this, and I'm at a loss as to how I would do this without resorting to using jQuery.

解决方案

ngModel is pretty awesome! If you specify the indexes as a model selectedValues

<select multiple ng-model="selectedValues">

built from your list (selected) in a $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 will automatically select them for you.

Note that this data binding is one-way (selected to UI). If you're wanting to use the <select> UI to build your list, I'd suggest refactoring the data (or using another $watch but those can be expensive).

Yes, selectedValues needs to contain strings, not numbers. (At least it did for me :)

Full example at http://jsfiddle.net/JB3Un/

这篇关于AngularJS选择多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！