web-dev-qa-db-ja.com

複数のオプションを選択する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を使用せずにこれを行う方法については迷っています。

javascriptmodel-view-controllerangularjs
19
monitorjbl

ngModel はすごい！モデルとしてインデックスを指定する場合selectedValues

<select multiple ng-model="selectedValues">

$watchのリスト（selected）から作成

$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/ の完全な例

28
PixnBits