Question

我想将模型值绑定到所选项

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

我想在页面加载后，在select中选择模型'v.T_Hour'的值，我在控制器中指定模型的值，当我查看生成的HTML时，我看到该值被选中在HTML代码中，但未在选择控件中选择，并且选择控件显示空项。

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中的2000个选项开始，选择重复选项会显着减慢速度。见：https://docs.angularjs.org/api/ng/directive/select

Angular ng-model ng-selected

1 个答案: