angularjs ng-options设置多个默认选项

ng-options可以接收一个数组或者对象,并对它们进行循环,将内部的内容提供给select标签内部的选项。而select中需要设置默认值,是如何设置呢?其实可以使用ng-model绑定数据myColor,也可以在对应的controller中定义ng-model全局数据$scope.myColor,并为其赋值。或者双向绑定指定ng-model,设置选中的值。

ng-options的表达式格式:

<所选属性>as<标签>for<变量>in<数组>

方法一:使用ng-model绑定数据myColor。

angular.module('myApp',[])
.controller('MyController',['$scope'],function($scope){
$scope.colors=['black','white','red','blue','yellow'];

$scope.myColor=$scope.colors[2];
})

方法二:在对应的controller中定义ng-model全局数据$scope.myColor,并为其赋值。

<divng-controller="MyController">
<selectng-model="myColor"ng-options="colorforcolorincolors"></select>
</div>

注意:赋值为select的默认值。

方法三:双向绑定指定ng-model,设置选中的值。

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"ng-app="app">
<head>
<title>select</title>
<scriptsrc="JS/angular.min.js"></script>
<script>
varapp=angular.module('app',[]);
app.controller('selectController',function($scope){
$scope.mycity='北京';
$scope.Cities=[{id:1,name:'北京',group:'中国'},{id:2,name:'上海',group:'中国'},{id:3,name:'广州',group:'中国'}];
});
</script>
</head>
<body>
<divng-controller="selectController">
<selectng-model="mycity"ng-options="city.nameascity.namegroupbycity.groupforcityinCities"></select>
<h1>欢迎来到{{mycity}}</h1>
</div>
</body>
</html>

原文来自:https://www.py.cn

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容