當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

深究AngularJS——下拉框（selected）

發(fā)布時間：2025/3/20 javascript 14 豆豆

生活随笔收集整理的這篇文章主要介紹了深究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> </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> <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。

<!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" ><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
下一篇：深究AngularJS——ng-chec