1、ng-options指令用途：
在表示式中使用陣列或物件來自動生成乙個select中的option列表。
ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少記憶體提高速度，以及提供選擇框的選項來讓使用者選擇。當select中乙個選項被選擇，該選項將會使用ng-model自動繫結到對應資料上。如果你想設乙個預設值，可以像這樣：$scope.selected = $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下拉框
語文現在引入 angular 使用 ng-options 指令來生成乙個下拉框，看下生成頁面的**數學英語
生物
value 是儲存到資料庫中的值，label是顯示在頁面上的值看下預覽的頁面效果，在後面新增的使用 ng-options 生成的select中，我們使用 obj 物件的 id作為select的value，使用obj 的city 作為 select 的labelvalue 就是 1、2、3、4這些數值；
lable 是"語文" 「數學」這些
-->
語文數學英語
生物
}
', function
($scope) ,,];
}])
3、三種ng-options常用方法：
1關於物件使用方法中 key 和 value 的一點說明2 3
416
21 value 是儲存到資料庫中的值，label是顯示在頁面上的值
22 value 就是 1、2、3、4這些數值；
23 lable 是"語文" 「數學」這些
24 -->
25 語文
26 數學
27 英語
28 生物
29
30 31}
32
33 34
35
36 3738 語法： laber for value in array
39
40
41
42 4344 語法： select as label for value in array
45 哪位同學你認識？你的選擇是：}
46
47
48
49
50自定義下拉顯示內容格式
51 哪位同學你認識？你的選擇是：}
52 語法：拼接字串
53
54
55
56
57使用group by對下拉列表分組
58 語法：label group by groupname for value in array
59 哪位同學你認識？你的選擇是：}
60
61
62 6364 語法 1： label for (key , value) in object
65 哪個城市？你的選擇是：}
66
67 語法 2： select as label for (key ,value) in object
68 哪個城市？你的選擇是：}
69
70
71 ',
function
($scope) ,
78 ,
79
80 ];
81 $scope.selectedcity = "bj";
82 83 // 定義陣列
84 $scope.arr1 = ["大白", "阿狸", "熊貓"];
85 //定義預設為 「大白」
86 $scope.selectedanimal = "大白";
87 88 //定義包含物件的陣列 obj2
89 $scope.obj2 = [
90 ,
91 ,
92
93 ];
94 $scope.selectedstu = "韓梅梅";
95 96 //定義簡單物件 obj3
97 $scope.obj3 = ;
102 }])
103
104
105
106
完整**及預覽
4、ng-options 全部用法補充
標紅部分在**中已有例子，其餘的請自行消化理解測試
對於陣列：
對於物件：
Angular頁面指令
分為元件帶模板的指令，結構性指令改變宿主文件結構 ngif ngswitch ngfor 屬性性指令改變宿主行為 ngmodel ngstyle ngclass innerhtml 將value作為html標籤來解析 textcontent 將value作為文字解析 ngif ngif 如果vlau...
angular基礎 指令
指令 directive 可以理解為沒有模版的元件，它需要寄宿在乙個元素上 宿主 host 1.hostbinding 繫結宿主的屬性或樣式 import from angular core directive export class griditemdirective 2.hostlistene...
angular指令總結
ng list ng non bindable ng switch ng readonly ng include ng template angular中有一些不常用，但卻非常有用的指令，如果在開發過程中可以直接使用這些指令，會大大地加快我們的開發效率。ng class 指令用於給 html 元素動...