寫在前面
最近由於項目需要，學了一段時間的angularjs，發現還是比較容易上手的，里面有很多地方，的確震撼了自己。這里就簡單的介紹一下angularjs中ng-select和ng-options的用法。
ng-select
ng-select用來將數據同HTML的<select>標簽進行綁定。這個指令可以和ng-model以及ng-options指令一起使用，構建精細且表現良好的動態表單。
ng-options的值可以是一個內涵表達式（comprehension expression），其實這只是一種有趣的說法，簡單來說就是它可以接收一個數組或者對象，並對她們進行循環，將內部的內容提供給select標簽內部的選項。它可以是一下兩種形式。
1、數組作為數據源
用數組中的值做標簽。
用數組中的值作為選中的標簽。
用數組中的值做標簽組。
用數組中的值作為選中的標簽組。
2、對象作為數據源
用對象的鍵-值（key-value）做標簽。
用對象的鍵-值作為選中的標簽。
用對象的鍵-值作為標簽組。
用對象的鍵-值作為選中的標簽組。
一個例子
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>select</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京' }, { id: 2, name: '上海' }, { id: 3, name: '廣州' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city for city in Cities"></select> </div> </body> </html>
查看一下dom
你會發現，上面的option中的text都是對象，這也很容易理解，因為cities數組的每一項都是一個對象，綁定的時候將以對象直接綁定上。那么我們如何只讓它顯示name屬性呢？
<div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name for city in Cities"></select> </div>
直接點出屬性即可。再查看下dom數。
值已經顯示出來，但是並不是太完美，因為第一項默認選中的竟然沒有值，那么接下來我們指定默認值。
$scope.mycity = '北京';
加上這句代碼，並不能解決問題，我們仍需修改ng-options
<select ng-model="mycity" ng-options="city.name as city.name for city in Cities"></select>
我們再查看下dom
ng-options有以下格式的語法
for array data sources:
-
- label for value in array
- select as label for value in array
- label group by group for value in array
- select as label group by group for value in array track by trackexpr
for object data sources:
-
- label for (key , value) in object
- select as label for (key , value) in object
- label group by group for (key, value) in object
- select as label group by group for (key, value) in ob
在看一個分組的例子，為cities數組加上group屬性，並按照group分組：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>select</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京', group: '中國' }, { id: 2, name: '上海', group: '中國' }, { id: 3, name: '廣州',group:'中國' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select> </div> </body> </html>
結果
雙向綁定
這里已經指定了ng-model，獲取選中的值，也非常方便了。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title>select</title> <script src="JS/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('selectController', function ($scope) { $scope.mycity = '北京'; $scope.Cities = [{ id: 1, name: '北京', group: '中國' }, { id: 2, name: '上海', group: '中國' }, { id: 3, name: '廣州', group: '中國' }]; }); </script> </head> <body> <div ng-controller="selectController"> <select ng-model="mycity" ng-options="city.name as city.name group by city.group for city in Cities"></select> <h1>歡迎來到{{mycity}}</h1> </div> </body> </html>
總結
剛接觸angularjs不久，這是見到的其中的一個例子，順手總結在這里，也是一種學習。