深究AngularJS——下拉框（selected）
即使写一个下拉框，也会有多种情况，我这里讲讲我遇到过的。
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示例：
<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。
<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" >
<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>