angularjs 的select的option是通過循環造成的，循環的方式可能有 ng-option 或 者 <option ng-repeat></option>option中利用ng-repeat的指令但是傳來的下拉列表總是第一行顯示的是空的。
一、錯誤有空白
(一)、代碼展示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 6 </head> 7 <body> 8 <style> 9 select{ 10 width: 150px; 11 height: 30px; 12 } 13 </style> 14 <div ng-app="myApp" ng-controller="myCtrl"> 15 <select ng-model="selectedName" ng-options="x for x in names"> 16 </select> 17 </div> 18 <p>ng-options 指令的使用。</p> 19 </body> 20 <script> 21 var app = angular.module('myApp', []); 22 app.controller('myCtrl', function($scope) { 23 $scope.names = ["my", "dragon", "boke"]; 24 }); 25 </script>
(二)、瀏覽器展示
如上圖展示下拉菜單給開發者獲取select的value值帶來很大的不便。 所以經過給select的ng-model一個默認的值，或者這樣<option value="">請選擇</option>這個樣子的話，下拉列表里面那個空值就會變成請選擇字樣，就會去掉空白的option。如下
二、正確處理空白
(一)、代碼展示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 6 </head> 7 <body> 8 <style> 9 select{ 10 width: 150px; 11 height: 30px; 12 } 13 </style> 14 <div ng-app="myApp" ng-controller="myCtrl"> 15 <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> 16 </select> 17 </div> 18 <script> 19 var app = angular.module('myApp', []); 20 app.controller('myCtrl', function($scope) { 21 $scope.names = ["my", "dragon", "boke"]; 22 }); 23 </script> 24 <p>ng-options 指令的使用。</p> 25 </body> 26 </html>
(二)、瀏覽器展示
