2013-06-21 24 views
5

私が選ばれたウィジェットとAngularJSの組み合わせでNG-モデルの設定について質問があります(このビデオを参照してください。https://www.youtube.com/watch?v=8ozyXwLzFYs)を角度+:選択された値が

私は何をしたいのは、いくつかの値に受信者を設定することです予め選択される。彼らはあるがここでは、この例のためのHTMLとJS(ビデオから)コントローラ

$scope.recipientsList = []; 
    $scope.recipients = []; 
    $scope.fetchRecipients = function() { 
     $http.get($scope.url).then(function(result){ 

     $scope.recipientsList = [ 
    {"id":0, "name":"Recipient 0"}, 
    {"id":1, "name":"Recipient 1"}, 
    {"id":2, "name":"Recipient 2"}, 
    {"id":3, "name":"Recipient 3"}, 
    {"id":4, "name":"Recipient 4"}, 
    {"id":5, "name":"Recipient 5"}, 
    {"id":6, "name":"Recipient 6"}, 
    {"id":7, "name":"Recipient 7"}, 
    {"id":8, "name":"Recipient 8"}, 
    {"id":9, "name":"Recipient 9"}, 
    {"id":10, "name":"Recipient 10"} 
]; 
    $scope.recipients = [{"id":0, "name":"Recipient 0"}, 
    {"id":1, "name":"Recipient 1"}]; 
    }); 
    } 

    $scope.fetchRecipients(); 


<h1>Chosen</h1> 
    <select data-placeholder="Choose a Recipient" multiple class="span4 chzn-select" chosen 
     ng-model="recipients" ng-options="recipient.name for recipient in recipientsList"> 
    </select> 

    <p ng-repeat="recipient in recipients"><strong>{{recipient.name}}</strong></p> 

そしてJSがある私は、いくつかの組み合わせを試してみましたが、メニュー内の値が事前に選択されていませんメニューの下に表示されるため、受信者に格納されます。この例は次のとおりです。 http://jsfiddle.net/YKZSw/8/

あなたのアンサーに感謝します。

マテイ

答えて

4

AngularJS ngOptions属性は、データソースとして提供される配列から要素を選択します。あなたの場合、recipientsList配列には特定の数のオブジェクトが含まれています。しかし、事前に選択したい要素は、類似していてもオブジェクトの不等式のためリストに存在しません。 意味recipientsList:{"id":0、 "name": "受信者0"}が受信者と等しくない:{"id":0、 "name": "受信者0"} JSコンソール)。 Angularはリスト内の要素を見つけられないため、事前選択しません。

この修正フィドルは動作します:http://jsfiddle.net/mananbharara/YKZSw/9/ この場合の唯一の違いは、受信者の定義である:

$scope.recipients = [$scope.recipientsList[0], $scope.recipientsList[1]];

をここでは使用すると、1つのリストを持っており、選択された値は、そのリストからのみ来ることができます。

2つのリストを管理する必要がある場合に使用するこの方法の代替方法は、選択値をプリミティブ型として保持することです。この場合、原始的な平等は常に成立する。

+0

フィルタが関係している場合、この現象は発生しませんか?ここでは、この問題が事前選択から停止しているjsfiddleです、これを解決するための提案? http://jsfiddle.net/wKMZM/13/ – ragche

+0

あなたは 'myModel'の初期値を設定している間にあなたが間違っているようです。あなたのマークアップが示唆するものは、初期値を 'Object'に設定している間に文字列値にバインドしたいということです。ここには動作しているように見える[更新されたフィドル](http://jsfiddle.net/wKMZM/15/)があります。 '$ scope.myModel = 'ninjacat''の代わりに '' $ scope.myModel = {type:' ninjacat '}; 'を実行する代わりに、 – manan

6

AngularJSバージョン1.1.5以来、彼らはtrack by節を追加しました。

これが役立ちます。あなたの場合、IDでトラックを追加することができます。

関連する問題