2016-11-18 104 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来查看真实案例。 –