select?是 AngularJS 預設的一組directive。下面是其官網api doc給出的用法：AngularJS:select

大意是，select中的ngOption可以采用和ngRepeat指令類似的循環結構，其data source可以是array或者是object。針對兩種data source又有衍生的好幾種用法。但是官網的例子實在是太少了。

下面是針對幾個不太容易理解的用法的例子。

先上controller

function selectCtrl($scope) {

$scope.selected = ‘‘;

$scope.model = [{

id: 10001,

mainCategory: ‘男‘,

productName: ‘水洗T恤‘,

productColor: ‘白‘

}, {

id: 10002,

mainCategory: ‘女‘,

productName: ‘圓領短袖‘,

productColor: ‘黑‘

}, {

id: 10003,

mainCategory: ‘女‘,

productName: ‘短袖短袖‘,

productColor: ‘黃‘

}];

}

實例一：基本下拉效果

usage:?label for value in array

-- 請選擇 --

效果:

說明

usage中的 value 也就是 ng-options 中的 m，而 m 是數組model的一個元素，它是一個變量

usage中的 label 也就是 ng-options 中的m.productName， 其實就是一個?AngularJS Expression

實例二：自定義下拉顯示名稱

usage:?label for value in array

-- 請選擇 --

效果

說明

可以看到，usage 中的 label 可以根據需求拼接出不同的字符串

實例三： 讓選項分組

usage: label group by group for value in array

-- 請選擇 --

效果

說明

這里使用了group by，通過$scope.model中的mainCategory字段進行分組

實例四：自定義ngModel的值

usage: select as label for value in array

-- 請選擇 --

效果

說明

這種用法也是select指令最復雜的一種。從效果中可以看出，usage中select的作用就是重新定義ng-model的值。在這里，ng-model等于m.id，當ng-model發生改變的時候，得到的是m.id的值

參考

http://docs.angularjs.org/api/ng.directive:select

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

總結

以上是生活随笔為你收集整理的html5option的js代码,ng-option(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。