[Angularjs]ng-select和ng-options
最近由於項目需要，學了一段時間的angularjs，發現還是比較容易上手的，裡面有很多地方，的確震撼了自己。這裡就簡單的介紹一下angularjs中ng-select和ng-options的用法。 ng-selectng-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 arrayselect as label for value in arraylabel group by group for value in arrayselect as label group by group for value in array track by trackexprfor object data sources: label for (key , value) in objectselect as label for (key , value) in objectlabel group by group for (key, value) in objectselect 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>
結果 雙向繫結 這裡已經指定了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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
