即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。

1. 将值写死的情况：

<body>
<div ng-app="myApp" ng-controller="myCtrl" ><select ng-model="adStyle"  ng-change="look();" ><option value="0">全部广告类型</option><option value="1">图片广告</option><option value="2">图音视广告</option>        </select>
</div>
<script>    var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.look = function(){          alert($scope.adStyle)}       });
</script>
</body>

运行上面代码时，会发现下拉框里空白，什么也没有，但当我们点击下拉框时，却发现里面有值，这是为什么呢？这是因为我们还需要给下拉框一个默认选中项，我们只需在控制器里初始化时给一个值即可，如：$scope.adStyle = "0";

2. option是动态变化的情况

1.使用ng-options

<body>
<div ng-app="myApp" ng-controller="myCtrl"><select ng-model="model" ng-options="x for x in names"><option value="">所有人</option> <!-- 不加这句代码，会出现空白 --></select>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.names = ["张三", "李四", "王二"];});
</script>
</body>

2. 使用ng-repeat：

这种方式，option的value值跟内容都是一样的，但这种情况不会出现空白

<div ng-app="myApp" ng-controller="myCtrl"><select><option ng-repeat="x in names">{{x}}</option></select>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.names = ["图片广告", "音频广告", "视频广告"];});
</script>
</body>

3.使用ng-options选择的是对象，而ng-repeat选择的是字符串

ng-repeat示例：

<body>
<div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectModel"><option value="">所有人</option> <!-- 没有这句代码，会出现空白 --><option ng-repeat="x in formData" value="{{x.content}}">{{x.name}}</option>     </select><h1>你选择的将是一个vlaue对应的字符串: {{selectModel}}</h1>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.formData = [{name : "张三", content : "我有病"},{name : "李四", content : "我有药"},{name : "王二", content : "我啥也没有"}];});
</script>
</body>

ng-options示例：

<!-- ng-options="x.name for x in formData"里x.name的结果就会是optoin标签之间的内容，而不是value值，value值默认是对象 -->
<body>
<div ng-app="myApp" ng-controller="myCtrl"><select ng-model="selectModel" ng-options="x.name for x in formData"><option value="">所有人</option> <!-- 没有这句代码，会出现空白 --></select><h1>你选择的是: {{selectModel.name}}</h1><p>内容是: {{selectModel.content}}</p>
</div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.formData = [{name : "张三", content : "我有病"},{name : "李四", content : "我有药"},{name : "王二", content : "我啥也没有"}];});
</script>
</body>

有人就会看不明白，怎么就ng-options是选择的对象了？是这样的，从上面例子可看出，在ng-repeat里，只能{{selectModel}}这样写，且显示的是vlaue值；而在ng-options里，可{{selectModel}}这样写，可{{selectModel.name}}，亦可{{selectModel.content}}这样写，这就说明了此时被选中的对应的是一个对象。

4.标签的value值和之间的内容都是对象里的值的情况

既然是对象，我们当然得选用ng-options。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl" ><!-- 我们需要将ID设为value值，shortName设为option标签之间的内容重点是：ng-options="item.channelId as item.shortName for item in channelList"这个写法--><select ng-model="formData.channelId" ng-options="item.channelId as item.shortName for item in channelList"><option value="">全部渠道</option><!-- 替换空白--></select>你选择的渠道对应的ID是:{{formData.channelId}}
</div>
<script>    var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.channelList=[{"channelId":1,"shortName":"张三"},{"channelId":2,"shortName":"李四"}]});
</script>
</body>
</html>

深究AngularJS——下拉框（selected）相关推荐

thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
jq获取下拉列表_jQuery下拉框操作系列$(option:selected,this) （锋利的jQuery）
下拉框应用选项1 选项2 选项3 选项4 选项5 选项6 选项7 选项8 选中添加到右边≥≥ 全部添加到右边≥≥ 选中删除到左边<< 全部删除到左边<< $(function ...
select下拉框默认选中selected属性不起作用的解决方法 ligerui
select下拉框默认选中selected属性不起作用浏览器-360浏览器系统-win10 框架-ligerui 原先代码: <td align="left" class ...
angularjs的select 下拉框默认选中某个选项
angularjs的select 下拉框默认选中某个选项在网上找了很多链接,试验之后都不行.比如常见的: <select class="form-control" ng-m ...
html5 下拉框美化,纯js超酷select下拉框美化插件
tastySelect是一款纯js超酷select下拉框美化插件.tastySelect下拉框插件支持多选,内置两种主题,使用CSS3动画过渡效果,整体设计时尚大方. 使用方法在页面中引入tasty ...
下拉框选中状态html,js中select下拉框选中
怎么用js动态设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...
JQuery操作下拉框
要实现这种效果: HTML: <script src="js/jquery-1.7.2.min.js"></script> <table>< ...
php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
js填充select下拉框并选择默认值
/* 使用json数组填充下拉框并复选 *//* 初始化下拉框数据 */ var jsonStr = { "data": [] }; for (var str in JsonStr ...

深究AngularJS——下拉框（selected）