Angular of-model of-selected

Question

我想将模型值绑定到 selected 项目

<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' 的值在 select 中被 select 编辑，我在控制器中分配模型的值，当我查看生成的 HTML 我看到该值在 HTML 代码中被 selected，但在 select 控件中未被 selected，并且 select 控件显示一个空项。

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

根据 Angular 文档 ngOption 比 ngRepeat 更好：在 ngRepeat 和 ngOptions 之间进行选择在许多情况下，可以在元素上使用 ngRepeat 而不是 ngOptions 来获得类似的结果。但是，ngOptions 提供了一些好处：

更灵活地通过 select 分配 ' 的模型作为理解表达式的一部分通过不为每个重复实例创建新范围来减少内存消耗通过在 documentFragment 中而不是单独创建选项来提高渲染速度具体来说，在 Chrome 和 Internet Explorer / Edge 中，具有重复选项的 select 从 2000 个选项开始会显着减慢速度。参见：https://docs.angularjs.org/api/ng/directive/select

Angular of-model of-selected

Angular ng-model ng-selected

model

selected

angularjs

ng-repeat