概述
select指令實現(xiàn)的是下拉框的功能，一般會配合option指令以及ng-model指令使用砍鸠。在select指令中常用的一些指令：
| 指令 | 說明 |
|---|---|
| ng-model | 綁定的數(shù)據(jù) |
| required湃望，ng-required | 指定是否為必須的，具體可以查看required指令相關(guān)內(nèi)容 |
| multiple | 是否可以多選 |
| ng-change | 選擇發(fā)生變化時的響應(yīng) |
| ng-option | select的可選項 |
在option指令中院喜，會把value屬性或者textContent的值作為選中的值亡蓉，優(yōu)先使用value的值，optiong只會有string類型的值喷舀，如果不是string類型的值就無法正確處理砍濒。如果想要option綁定一個不是字符串格式的值就需要特殊處理一下淋肾。
當(dāng)select綁定的數(shù)據(jù)無法在已有的option中找到時，就會自動添加一個對應(yīng)的option爸邢，這個option顯示的是空的樊卓，當(dāng)數(shù)據(jù)變化后就會刪除。
實現(xiàn)細節(jié)
在select指令中主要實現(xiàn)了上個部分：controller杠河，prelink碌尔，postlink。
controller中主要實現(xiàn)了一些功能函數(shù)：
| 函數(shù) | 說明 |
|---|---|
| renderUnknownOption | 創(chuàng)建一個未知option |
| updateUnknownOption | 更新未知option |
| generateUnknownOptionValue | 獲取未知option的值 |
| removeUnknownOption | 刪除未知option |
| selectEmptyOption | 選擇空option |
| unselectEmptyOption | 去除空option的選擇狀態(tài) |
| readValue | 讀取選中的值券敌，multiple會從寫這個函數(shù) |
| writeValue | 根據(jù)數(shù)據(jù)改變option選擇狀態(tài)唾戚，multiple會從寫這個函數(shù) |
| addOption | 添加option |
| removeOption | 刪除option |
| hasOption | 判斷option是否存在 |
| registerOption | 注冊option |
prelink中主要change事件的監(jiān)聽以及如果是multiple類型時從寫readValue和writeValue方法。
postlink里主要做的事情是復(fù)寫ng-model的controller的$render方法待诅，這個方法在頁面刷新時會被調(diào)用叹坦。
在option指令中，最主要的工作是把自己的信息注冊到select中去卑雁，調(diào)用select controller的registerOption方法募书。
var selectCtrlName = '$selectController',
parent = element.parent(),
selectCtrl = parent.data(selectCtrlName) ||
parent.parent().data(selectCtrlName); // in case we are in optgroup
if (selectCtrl) {
selectCtrl.registerOption(scope, element, attr, interpolateValueFn, interpolateTextFn);
}
從代碼可以看出option指令中會嘗試獲取父標(biāo)簽或父標(biāo)簽的父標(biāo)簽的controller，這個controller對應(yīng)的就是select中的controller序厉，所以option指令必須配合select指令或者實現(xiàn)了registerOption方法的指令使用锐膜。
樣例代碼
<!DOCTYPE html>
<html lang="en" ng-app="app">
<!--<html>-->
<head>
<title>Test</title>
</head>
<body>
<div ng-controller="ExampleController">
<form name="myForm">
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" ng-model="data.singleSelect">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
</select><br>
<label for="singleSelect"> Single select with "not selected" option and dynamic option values: </label><br>
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select><br>
<button ng-click="forceUnknownOption()">Force unknown option</button><br>
<tt>singleSelect = {{data.singleSelect}}</tt>
<hr>
<label for="multipleSelect"> Multiple select: </label><br>
<select name="multipleSelect" id="multipleSelect" ng-model="data.multipleSelect" multiple>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select><br>
<tt>multipleSelect = {{data.multipleSelect}}</tt><br/>
</form>
</div>
<script src="./node_modules/angular/angular.js" type="text/javascript"></script>
<script>
angular.module('app', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1'
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
</script>
</body>
</html>
