角度NG-モデルNG-選択

Question

私が選択した項目Iは、ページをロードした後に、モデルのv.T_Hour 'の値を選択して選択したい

<select id="hours" ng-model="v.T_Hour"> 
    <option ng-repeat="n in [].constructor(24) track by $index" ng-selected="{{$index==v.T_Hour}}" value="{{$index}}">{{$index>9?$index:"0"+$index}}:00</option> 
</select> 

にモデル値をバインドしたい

を、私はコントローラのモデルの値を割り当てます。結果のHTMLを表示すると、値がHTMLコードで選択されていますが、選択コントロールでは選択されていないことがわかり、選択コントロールには空のアイテムが表示されます。

Answer 1

角度ドキュメンテーションngOptionをよれば、これ

<select              
    name="name" 
    id="id" 
    ng-options="option.name for option in v.data track by option.value" 
    ng-model="v.selected" 
    class="form-control inline-forms"> 
    <option value="" selected>{{placeHolder}}</option> 
</select> 

とコントローラ

$scope.v = {data:[], selected:{}, placeHolder:""} 
$scope.v.data = [{name:"nameOne", value:"valueOne"},{name:"nameTwo", value:"valueTwo"},{name:"nameThree", value:"valueThree"}] 
$scope.v.selected = $scope.v.data[0] 
$scope.v.placeHolder = "Click to Select" 

にしてみてくださいがngRepeatより行くには良い方法です： は、多くの場合、ngRepeatとngOptions の間で選択、ngRepeatを使用することができます同様の結果を得るために、ngOptionsの代わりにon要素を使用します。しかし、ngOptionsはいくつかの利点があります。のモデルは、各繰り返しインスタンス のための新しいスコープを作成しないことにより、理解の表現 減少メモリ消費量の一部として選択経由で割り当てられている方法で

より多くの柔軟性を作成することによって、レンダリング速度の増加しました個別にではなくdocumentFragment内のオプション 具体的には、繰り返しオプションを選択すると、ChromeとInternet Explorer/Edgeの2000オプションから大幅に遅くなります。 参照：https://docs.angularjs.org/api/ng/directive/select