# ANGULAR.JS:?NG-SELECT?AND?NG-OPTIONS
PS:其實看英文文檔比看中文文檔更容易理解,前提是你的英語基礎還可以。英文文檔對于知識點講述簡明扼要,通俗易懂,而有些中文文檔讀起來特別費力,基礎差、底子薄的有可能一會就會被繞暈了,最起碼英文文檔中的代碼與中文文檔中的代碼是一致的,但知識點講述實在是差距太大。
Angular.js?has?a?powerful?directive?waiting?for?you:?it's?ng-select.?With?it?you?can?fill?an?HTML-select?box?from?your?model.?It?supports?a?pretty?cool?selector?syntax,?which?is?-?unfortunately?-?a?little?bit?tricky.
~~~
Let's?assume?you?have?a?JSON?stream?which?looks?like?this:
{
????"myOptions":?[
????????{
????????????"id":?106,
????????????"group":?"Group?1",
????????????"label":?"Item?1"
????????},
????????{
????????????"id":?107,
????????????"group":?"Group?1",
????????????"label":?"Item?2"
????????},
...
}
~~~
//?Get?stream?in?the?object?called?data
$scope.myOptions?=?data.myOptions;
The?good?thing?is,?you?have?a?pretty?flat?data?stream.?When?I?started?with?this?feature,?I?had?an?array?of?groups?each?containing?the?specific?items.
?It?was?not?possible?for?me?to?fill?a?select?box?that?way.?Instead,?I?refactored?some?of?my?code?to?what?you?can?see?above.
?Angular.js?would?take?care?of?the?grouping?on?it's?own.
Here?is?my?select?definition:
~~~
<select
????ng-model="myOption"
????ng-options="value.id?as?value.label?group?by?value.group?for?value?in?myOptions">
????<option>--</option>
</select>
~~~
ng-model?is?the?name?of?the?property?which?will?reference?the?selected?option.?ng-options?is?the?directive?which?fills?the?dropdown.?It?deserves?a?bit?more?attention.
You?will?understand?it?more?easily?if?you?read?it?from?right?to?left.?First?there?is:
for?value?in?myOptions
It?means?you'll?iterate?through?elements?which?are?stored?in?myOptions.?Every?element?will?become?available?in?this?expression?with?the?name?"value".
The?next?part?is:
group?by?value.group
This?will?tell?Angular.js?to?make?up
<optgroup>
tags?and?the?label?attribute?will?be?filled?with?the?content?of?the?group?field.
The?last?one?is:
value.id?as?value.label
In?this?case,?value.id?will?become?the?model?(stored?in?ng-model),?if?your?users?have?chosen?an?option.?If?you?would?delete?"value.id?as",?simply?the?whole?value?object?would?become?the?model.
value.label
does?exactly?what?it?looks?like:?it's?the?label?of?the?select?box.
If?you?run?your?code,?you'll?see?something?like?that:
~~~
<optgroup?label="Group?1">
???<option?value="0">Item?1</option>
???<option?value="1">Item?2</option>
</optgroup>
~~~
Please?look?again?and?check?the?value?attribute?of?the?options.?You?might?have?expected?it's?matching?the?IDs?from?your?JSON,?
but?that?is?not?the?case?(and?yes,?I?thought?like?this?initially).?Actually?this?is?an?increasing?number?and?references?the?position?of?the?model
?(which?is?an?array?in?my?case).?Don't?worry?about?that?-?if?you?select?your?option?the?correct?ID?will?be?selected?and?put?into?your?model.?
Or,?if?you?leave?out?the?value.id?part?of?the?expression,?the?whole?selected?object?will?become?your?model.You?can?easily?test?it.
~~~
<select?
????ng-change="selectAction()"
????ng-model="myOption"
????ng-options="value.id?as?value.label?group?by?value.group?for?value?in?myOptions">
????<option>--</option>
</select>
~~~
ng-change?will?fire?if?the?user?has?chosen?something.?You?can?output?it?by?typing:
~~~
$scope.selectAction?=?function()?{
????console.log($scope.myOption);
};
~~~
I?find?the?syntax?of?ng-options?pretty?much?counter?intuitive.?It?took?me?a?good?while?to?understand?it?and?I?was?glad?about?the?nice?help?on?the?AngularJS?mailinglist.?
That?said,?I?think?more?examples?on?the?docs?and?an?improved?syntax?would?really?help.?Like:
foreach?value?in?myOptions?use?value.label?as?label?use?value.id?as?model?group?by?value.group
Here?is?a?working?JS?fiddle?example?which?illustrates?the?use?of?the?ng-select?directive:?http://jsfiddle.net/jm6of9bu/2/
- 前言
- (一)深入理解ANGULARUI路由_UI-ROUTER
- (二)AngularJS路由問題解決
- (四)ANGULAR.JS實現下拉菜單單選
- (五)Angular實現下拉菜單多選
- (六)AngularJS+BootStrap實現彈出對話框
- (七)實現根據不同條件顯示不同控件
- (十)AngularJS改變元素顯示狀態
- (十四)AngularJS靈異代碼事件
- (十七)在AngularJS應用中實現微信認證授權遇到的坑
- (十八)在AngularJS應用中集成科大訊飛語音輸入功能
- (十九)在AngularJS應用中集成百度地圖實現定位功能
- (二十一)Angularjs中scope與rootscope區別及聯系
- (二十三)ANGULAR三宗罪之版本陷阱
- (二十四)AngularJS與單選框及多選框的雙向動態綁定
- (二十五)JS實現導入文件功能
- (二十七)實現二維碼信息的集成思路
- (二十八)解決AngualrJS頁面刷新導致異常顯示問題
- (二十九)AngularJS項目開發技巧之localStorage存儲
- (三十)AngularJS項目開發技巧之圖片預加載
- (三十一)AngularJS項目開發技巧之獲取模態對話框中的組件ID
- (三十二)書海拾貝之特殊的ng-src和ng-href
- (三十三)書海拾貝之簡介AngularJS中使用factory和service的方法
- (三十四)Angular數據更新不及時問題探討
- (三十六)AngularJS項目開發技巧之利用Service&Promise&Resolve解決圖片預加載問題(后記)