angular指令筆記ng-options的使用方法
1、ng-options指令用途：
10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有當(dāng)涂免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在表達(dá)式中使用數(shù)組或?qū)ο髞碜詣?dòng)生成一個(gè)select中的option列表。ng-options與ng-repeat很相似，很多時(shí)候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內(nèi)存提高速度，以及提供選擇框的選項(xiàng)來讓用戶選擇。當(dāng)select中一個(gè)選項(xiàng)被選擇，該選項(xiàng)將會(huì)使用ng-model自動(dòng)綁定到對(duì)應(yīng)數(shù)據(jù)上。如果你想設(shè)一個(gè)默認(rèn)值，可以像這樣：$scope.selected = $scope.collection[3]。
1.1 track by的用途：
track by主要是防止值有重復(fù)，angularjs會(huì)報(bào)錯(cuò)。因?yàn)閍ngularjs需要一個(gè)唯一值來與生成的dom綁定，以方便追蹤數(shù)據(jù)。例如：items=[“a”,“a”,“b”],這樣ng-repeat=“item in items”就會(huì)出錯(cuò)，而用ng-repeat=“(key,value) in items track by key”就不會(huì)出現(xiàn)錯(cuò)誤了。
1.2 ng-option使用注意
使用時(shí)候，必須加 ng-model 指令，否則無法使用會(huì)報(bào)錯(cuò)
2、select下拉框中l(wèi)abel和value分別代表什么
先寫個(gè)最簡(jiǎn)單最原始的select下拉框
label 和 value 具體是什么
現(xiàn)在引入 angular 使用 ng-options 指令來生成一個(gè)下拉框，看下生成頁面的代碼
label 和 value 具體是什么
{{ selectedCity }}
看下預(yù)覽的頁面效果，在后面添加的使用 ng-options 生成的select中，我們使用 obj 對(duì)象的 id作為select的value，使用obj 的city 作為 select 的label
3、三種ng-options常用方法：
label 和 value 具體是什么 演示 label 和 value 值的變化
{{ selectedCity }}1. “數(shù)組”實(shí)現(xiàn)基本下拉
語法： laber for value in array
2. “包含對(duì)象的數(shù)組”實(shí)現(xiàn)“l(fā)abel 和 value值不同”的下拉
語法： select as label for value in array
哪位同學(xué)你認(rèn)識(shí)？你的選擇是：{{selectedStu}}
自定義下拉顯示內(nèi)容格式
哪位同學(xué)你認(rèn)識(shí)？你的選擇是：{{selectedStuString}}
語法：拼接字符串
使用group by對(duì)下拉菜單分組
語法：label group by groupName for value in array
哪位同學(xué)你認(rèn)識(shí)？你的選擇是：{{selectedStuString2}}
3. “對(duì)象”實(shí)現(xiàn)基本下拉
語法 1： label for (key , value) in object
哪個(gè)城市？你的選擇是：{{scity}}
語法 2： select as label for (key ,value) in object
哪個(gè)城市？你的選擇是：{{scity01}}
關(guān)于對(duì)象使用方法中 key 和 value 的一點(diǎn)說明
4、ng-options 全部用法補(bǔ)充
標(biāo)紅部分在代碼中已有例子，其余的請(qǐng)自行消化理解測(cè)試
對(duì)于數(shù)組：
- 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)
對(duì)于對(duì)象：
- 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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
當(dāng)前文章：angular指令筆記ng-options的使用方法
URL分享：http://m.jiaotiyi.com/article/jspsde.html