20

だから、私がやろうとしていることは、バニラ 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 を使用せずにこれを行う方法について途方に暮れています。

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 は自動的にそれらを選択します。

このデータ バインディングは一方向 ( selectedUI に対して) であることに注意してください。UI を使用し<select>てリストを作成したい場合は、データをリファクタリングすることをお勧めします (または別の$watchものを使用しますが、コストがかかる可能性があります)。

はい、selectedValues数字ではなく文字列を含める必要があります。（少なくとも私にとってはそうでした:)

http://jsfiddle.net/JB3Un/の完全な例

于 2013-09-11T21:39:52.993 に答える