2016-11-18 179 views
0

我想一個模型值綁定到所選項目角NG-模型NG-選擇

<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> 

我想在頁面加載後,在選擇要選擇的模式「v.T_Hour」的價值,我在控制器中分配模型的值,當我查看生成的HTML時,我發現在HTML代碼中選擇了該值,但未在選擇控件中選擇該值,並且選擇控件顯示空白項目。

回答

1

試試這個

<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" 

根據角文檔ngOption是更好的方式去比ngRepeat: ngRepeat和ngOptions 之間進行選擇在許多情況下,ngRepeat可以使用元素而不是ngOptions來實現類似的結果。然而,ngOptions提供了一些好處:

更大的靈活性在怎樣的模型是由不創建用於每個重複實例 新範圍經由選擇指定爲理解表達 減少內存消耗的部分增加渲染速度通過創建文檔片段中的選項而不是單獨使用 具體而言,從Chrome和Internet Explorer/Edge中的2000個選項開始,重複選項的選擇會顯着減慢。 參見:https://docs.angularjs.org/api/ng/directive/select

+0

它適用於ng選項,但不適用於ng-repeat,我使用ng-repeat從00:00到23:00生成日時間列表,我的選擇值來自db,我賦值v.T_Hour =「db中的數值」在我的控制器中,但不起作用 –

+0

你可以創建一個plunker來查看真實案例。 –