[解決済み] 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 Groupsで見た標準的な対応は、ng-repeatを使うことです。しかし、選択された値のリストが不完全であるため、私は毎回リストを再作成することはできません。私が知る限り、AngularJSはこのためのメカニズムを持っておらず、私はjQueryに頼らずにこれを行う方法について途方に暮れています。

解決方法は？

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/