2016-04-02 3 views
0

私はangularjsを初めて使っていて、まだその言語を学んでいます。 htmlで選択ボックスを作成しましたが、これをコントローラの変数で設定したいと思います。anglejsを使ってhtmlで変数をインデックスする方法

{{variablename}}を使用してhtml内の変数を取得できましたが、その中のサブオブジェクトを取得できません。 私のコードhereをご覧ください。
あなたはそれがHTMLで「repeatSelect」を表示するが、私はその中にインデックスにオブジェクトをしようとした場合、それが表示されていないことを確認することができます。

を次のように

コントローラは$スコープ変数を持っている(のgetIdは空常にあります) HTMLコード内

controller('ExampleController', ['$scope', function($scope) { 
    $scope.repeatSelect = null; 
    $scope.data = { 
    availableOptions: [ 
     {id: '1', name: 'Option A'}, 
     {id: '2', name: 'Option B'}, 
     {id: '3', name: 'Option C'} 
    ], 
    }; 
}]); 

<tt>repeatSelect = {{repeatSelect}}</tt><br/> 
    <tt>getID = {{repeatSelect.id}}</tt><br/> 

repeatSelectが正常に動作しますが、repeatSelect.idにはありません。

ディレクティブ代わりhttps://docs.angularjs.org/api/ng/directive/ngOptionsに建て

答えて

1

使用ng-optionsを案内してください。

これは、特にHTML選択リストで動作するように設計されており、強力なオプションが豊富に用意されています。 http://plnkr.co/edit/kIcH5fF7suhN0rhVDez8?p=preview

+0

ああ、それに私を打つ、しかし、あなたは原因私が経験したパフォーマンスの問題には本当にいけない、私はそれが今の習慣を知っている – nCore

+0

「によってトラック」が必要:

<div ng-controller="ExampleController"> <label> Repeat select: </label> <select ng-options="option as option.name for option in data.availableOptions track by option.id" ng-model="repeatSelect"></select> <hr> <tt>repeatSelect = {{repeatSelect}}</tt><br/> <tt>getID = {{repeatSelect.id}}</tt><br/> </div> 

plunkrこちらをご覧ください。 –

+0

いつも "as"の前にトラックを使ったことはありません。遅くなるのは申し訳ありませんが、基本的に同じように "as"と "by track"の違いは何ですか? – nCore

関連する問題