angular---angularJs1.x中select如何遍歷渲染option，陣列與物件、索引使用以及動態非同步渲染option項
阿新 • • 發佈：2019-01-06
1、ng-options指令用途：
在表示式中使用陣列或物件來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少記憶體提高速度，以及提供選擇框的選項來讓使用者選擇。當select中一個選項被選擇，該選項將會使用ng-model自動繫結到對應資料上。如果你想設一個預設值，可以像這樣：scope.collection[3]。
1.1 track by的用途：
track by主要是防止值有重複，angularjs會報錯。因為angularjs需要一個唯一值來與生成的dom繫結，以方便追蹤資料。例如：items=[“a”,“a”,“b”],這樣ng-repeat=“item in items”就會出錯，而用ng-repeat=“(key,value) in items track by key”就不會出現錯誤了。
1.2 ng-option使用注意：
使用時候，必須加 ng-model 指令，否則無法使用會報錯
2、select下拉框中label和value分別代表什麼
先寫個最簡單最原始的select下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具體是什麼</title> 現在引入 angular 使用 ng-options 指令來生成一個下拉框，看下生成頁面的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具體是什麼</title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<select>
<!--
value 是儲存到資料庫中的值，label是顯示在頁面上的值
value 就是 1、2、3、4這些數值；
lable 是"語文" “數學”這些
-->
<option value="1">語文</option>
<option value="2">數學</option>
<option value="3">英語</option>
<option value="4">生物</option>
</select>
<br>
<br>
<br>
<div>{{ selectedCity }}
<br>
<!-- 這裡 c.id as c.city for c in obj 我們使用 obj 物件的 id作為select的value，使用obj 的city 作為 select 的label -->
<select ng-options="c.id as c.city for c in obj" ng-model="selectedCity">
</select>
</div>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('mainCtrl', ['$scope', function($scope) {
$scope.selectedCity = "bj";
$scope.obj = [
{ "id": "bj", "city": "北京" },
{ "id": "sh", "city": "上海" },
{ "id": "zz", "city": "鄭州" }
];
}])
</script>
</body>
</html>看下預覽的頁面效果，在後面新增的使用 ng-options 生成的select中，我們使用 obj 物件的 id作為select的value，使用obj 的city 作為 select 的label
3、三種ng-options常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>label 和 value 具體是什麼</title>
<script type="text/javascript" src="../js/angular-1.3.0.js"></script>
<style type="text/css">
.mart30 {
margin-top: 30px;
border-top: 1px solid #000;
}
</style>
</head>
<body ng-app="myapp">
<div ng-controller="mainCtrl">
<select>
<!--
value 是儲存到資料庫中的值，label是顯示在頁面上的值
value 就是 1、2、3、4這些數值；
lable 是"語文" “數學”這些
-->
<option value="1">語文</option>
<option value="2">數學</option>
<option value="3">英語</option>
<option value="4">生物</option>
</select>
<div class="mart30">
<h3>演示 label 和 value 值的變化</h3> {{ selectedCity }}
<!-- 這裡 c.id as c.city for c in obj 我們使用 obj 物件的 id作為select的value，使用obj 的city 作為 select 的label -->
<select ng-options="c.id as c.city for c in obj1" ng-model="selectedCity">
</select>
</div>
<div class="mart30">
<h3>1. “陣列”實現基本下拉</h3>
<p>語法： laber for value in array</p>
<select ng-options="animal for animal in arr1" ng-model="selectedAnimal"></select>
<br>
</div>
<div class="mart30">
<h3>2. “包含物件的陣列”實現“label 和 value值不同”的下拉</h3>
<p>語法： select as label for value in array</p>
<p>哪位同學你認識？你的選擇是：{{selectedStu}}</p>
<select ng-options="c.name as c.id for c in obj2" ng-model="selectedStu"></select>
<br>
<br>
<br>
<p><strong>自定義下拉顯示內容格式</strong></p>
<p>哪位同學你認識？你的選擇是：{{selectedStuString}}</p>
<p>語法：拼接字串</p>
<select ng-options="c.name as (c.name +'- 英文名：'+c.id) for c in obj2" ng-model="selectedStuString"></select>
<br>
<br>
<br>
<p><strong>使用group by對下拉選單分組</strong></p>
<p>語法：label group by groupName for value in array</p>
<p>哪位同學你認識？你的選擇是：{{selectedStuString2}}</p>
<select ng-options="c.name group by c.sex for c in obj2" ng-model="selectedStuString2"></select>
</div>
<div class="mart30">
<h3>3. “物件”實現基本下拉</h3>
<p>語法 1： label for (key , value) in object</p>
<p>哪個城市？你的選擇是：{{scity}}</p>
<select ng-options="key for (key , value) in obj3" ng-model="scity"></select>
<p>語法 2： select as label for (key ,value) in object</p>
<p>哪個城市？你的選擇是：{{scity01}}</p>
<select ng-options="value as key for (key , value) in obj3" ng-model="scity01"></select>
</div>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('mainCtrl', ['$scope', function($scope) {
//定義包含物件的陣列 obj1
$scope.obj1 = [
{ "id": "bj", "city": "北京" },
{ "id": "sh", "city": "上海" },
{ "id": "zz", "city": "鄭州" }
];
$scope.selectedCity = "bj";
// 定義陣列
$scope.arr1 = ["大白", "阿狸", "熊貓"];
//定義預設為 “大白”
$scope.selectedAnimal = "大白";
//定義包含物件的陣列 obj2
$scope.obj2 = [
{ "id": "lilei", "name": "李雷", "sex": "man" },
{ "id": "hanmeimei", "name": "韓梅梅", "sex": "woman" },
{ "id": "jack", "name": "傑克", "sex": "man" }
];
$scope.selectedStu = "韓梅梅";
//定義簡單物件 obj3
$scope.obj3 = {
"湖北": "鄂",
"廣東": "粵",
"河南": "豫"
};
}])
</script>
</body>
</html>關於物件使用方法中 key 和 value 的一點說明
4、ng-options 全部用法補充
標紅部分在程式碼中已有例子，其餘的請自行消化理解測試
對於陣列：
label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)對於物件：
label for (key , value) in object
select as label for (key ,value) in object
label group by group for (key,value) in object
label disable when disable for (key, value) in object
select as label group by group for(key, value) in object
select as label disable when disable for (key, value) in object