當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——下拉框（selected）
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——下拉框（selected）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
即使寫一個下拉框，也會有多種情況，我這里講講我遇到過的。
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>運行上面代碼時，會發(fā)現(xiàn)下拉框里空白，什么也沒有，但當我們點擊下拉框時，卻發(fā)現(xiàn)里面有值，這是為什么呢？這是因為我們還需要給下拉框一個默認選中項，我們只需在控制器里初始化時給一個值即可，如：$scope.adStyle = "0";
2. option是動態(tài)變化的情況
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> <!-- 不加這句代碼，會出現(xiàn)空白 --></select> </div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.names = ["張三", "李四", "王二"];}); </script> </body>2. 使用ng-repeat：
這種方式，option的value值跟內容都是一樣的，但這種情況不會出現(xiàn)空白
<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> <!-- 沒有這句代碼，會出現(xiàn)空白 --><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> <!-- 沒有這句代碼，會出現(xiàn)空白 --></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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深究AngularJS——监听模型$wa
- 下一篇： gradle idea java ssm