Hacking with Angular: 玩轉ngOptions指令

首先說說爲何要詳細的瞭解一下這個指令，由於在工做中老是遇到關於下拉選項的一些操做，可是又經常會出現一些問題；基本會遇到下面一些問題：

• 關於下拉框使用ng-repeat或者ng-options指令的區別

• 關於下拉框的默認選項如何設置

• 關於下拉框選項的model值如何綁定

• 關於下拉框的禁用選項問題

• 關於下拉框的分組問題

• 關於下拉框的排序問題

下面咱們就來好好的研究一下ng-options，下面的部分就是關於上面問題的解決方案。
關於下面的例子詳見demo，原文連接

---

下面的部分沒有太按照上面的問題的順序，可是他們的解決方法都在裏面有說起。

下拉框的默認選項通常是能夠經過使用ng-init指令或者在控制器中對select的model值進行賦值來達到這個目的的。
關於使用ng-repeat仍是ng-options的選擇，當咱們的下拉列表循環的只是一些簡單的字符串或者數字的時候，使用這兩個指令都是能夠的;可是當咱們下拉列表循環的是一些比較複雜的數據而且還有一些附帶的其它要求的時候，咱們應該使用ng-options。

• 使用select結合ng-repeat指令組成一個含有默認值的下拉列表。

  • HTML部分

    <select ng-init="vm.item1 = vm.items1[0]"
            ng-model="vm.item1">
        <option ng-selected="v == vm.items1[0]"
                value="{{v}}"
                ng-repeat="v in vm.items1">
            {{v}}
        </option>
    </select>

  • JavaScript部分

    vm.items1 = [
              '選項一',
              '選項二',
              '選項三'
          ];

    咱們使用ng-repeat指令對下拉列表的值進行循環，而後使用ng-init對select的model進行初始化。

• 使用ng-options達到和上面同樣的效果

  • HTML部分

    <select ng-model="vm.item2"
               ng-init="vm.item2 = vm.items2[0]"
               ng-options="v for v in vm.items2">
      </select>

  • JavaScript部分

    vm.items2 = [1,2,3];

    下面的部分具體的講解ng-options指令後面使用的複雜的表達式，還須要注意的是，咱們使用的是數組做爲下拉列表的輸出，固然也可使用對象，詳情能夠參考官網

• select as label for value in array

  • 首先說明一下上面的表達式中每一項表示的是什麼；array表示的是咱們要進行循環的對象數組，
    value表示這個數組中的單獨一項，也就是一個單獨的對象，select和label都是對象中的某一個屬性，其中select還能夠表示整個對象；label表示的是下拉框中的顯示的選項，select表示下拉框中選中某一個label以後下拉框的model的值。通俗一點說就是，label只是下拉框中表現出來讓你選擇的選項，而select是你選中那個選項以後，下拉列表的值

  • HTML部分

    <select ng-init="vm.item3 = vm.items3[0].value"
        ng-options="v.value as v.name for v in vm.items3"
        ng-model="vm.item3">
    </select>

  • JavaScript部分

    vm.items3 = [
            {name: '選項一', value: 1},
            {name: '選項二', value: 2},
            {name: '選項三', value: 3}
        ];

  • 解釋一下上面的一些內容，其中ng-model="vm.item3"指定了這個下拉框的model值，咱們使用ng-init進行下拉框的初始化ng-init="vm.item3 = vm.items3[0].value"，關於ng-options="v.value as v.name for v in vm.items3"咱們來看一下，其中v表示數組中的單個對象，as左邊的值是咱們的下拉框選中時的值，as右邊的值是下拉框表面表示選擇項。在這個例子中，咱們會看到下拉框給咱們的選項是選項一，選項二，選項三，可是當咱們選中選項一的時候實際上下拉框的值是1也就是v.value

• label group by group for value in array

  • group by group的解釋，其中前面的group by是固定的，後面的group使咱們分組的依據。

  • HTML部分

    <select ng-init="vm.item4 = vm.items4[0]"
                  ng-options="v.name group by v.group for v in vm.items4"
                  ng-model="vm.item4">
     </select>

  • JavaScript部分

    vm.items4 = [
             {name: '選項一', value: 1, group: 'A'},
             {name: '選項二', value: 2, group: 'A'},
             {name: '選項三', value: 3, group: 'A'},
             {name: '選項四', value: 4, group: 'B'},
             {name: '選項五', value: 5, group: 'B'},
             {name: '選項六', value: 6, group: 'C'},
             {name: '選項七', value: 7, group: 'C'}
         ];

  • 頁面中的表現以下圖：
    關於上面代碼的一些解釋，能夠從上圖看到，只要咱們把分組的信息寫好，angular會幫助咱們處理好分組的事情。

• select as label disable when disable for value in array

  • disabled when disabled，disabled when是固定的語句，後面的disabled是一個條件，若是條件是true的話，那麼這一項是不能夠被選中的。

  • HTML部分

    <select ng-init="vm.item5 = vm.items5[0].value"
                  ng-options="v.value as v.name disable when v.show for v in vm.items5"
                  ng-model="vm.item5">
     </select>

  • JavaScript部分

    vm.items5 = [
              {name: '選項一', value: 1},
              {name: '選項二', value: 2, show: true},
              {name: '選項三', value: 3},
              {name: '選項四', value: 4, show: true},
              {name: '選項五', value: 5}
          ];

  • 頁面中的表現以下：
    能夠看到，選項二和選項四是禁用的。

• label disable when disable for value in array

  • HTML部分

    <select ng-init="vm.item6 = vm.items6[0]"
                          ng-options="v.name disable when v.show for v in vm.items6"
                          ng-model="vm.item6">
             </select>

  • JavaScript部分

    vm.items6 = [
             {name: '選項一', value: 1},
             {name: '選項二', value: 2, show: true},
             {name: '選項三', value: 3},
             {name: '選項四', value: 4, show: true},
             {name: '選項五', value: 5}
         ];

  • 這個例子和上面的很類似，可是仍是有一些區別的；這個例子的下拉框的model值是一個對象，上面那個例子的下拉框的model只是一個數字；從哪裏能夠看出來呢？由於兩個ng-options指令後面的表達式是不同的，若是表達式中使用了as關鍵字的話那麼as左邊的表達式的值就是咱們的下拉框的model值，若是不使用的話，默認的就是咱們數組中的某一項的值，在此處是一個對象。

• label for value in array track by trackexpr

  • track by是用來識別數組中的每一個對象的，當這個數組再次被從新建立或者更新的時候的時候，已經選擇的選項會被保留下來，也就是說，會保留每一項當時選擇的狀態。

  • HTML部分（未使用track by）

    <select multiple
                      ng-init="vm.item7 = []"
                      ng-options="v.name for v in vm.items7"
                      ng-model="vm.item7">
              </select>

  • JavaScript部分（未使用track by）

    vm.items7 = [
              {name: '選項一', value: 1, id: 1},
              {name: '選項二', value: 2, id: 2},
              {name: '選項三', value: 3, id: 3},
              {name: '選項四', value: 4, id: 4},
              {name: '選項五', value: 5, id: 5}
          ];

  • JavaScript部分，公用的函數changeItems部分

    function changeItems() {
              vm.items7 = [
                  {name: '選項一', value: 1, id: 1},
                  {name: '選項二', value: 2, id: 2},
                  {name: '選項三', value: 3, id: 3},
                  {name: '選項四', value: 4, id: 4},
                  {name: '選項五', value: 5, id: 5},
                  {name: '選項6', value: 6, id: 6}
              ];
              vm.items8 = [
                  {name: '選項一', value: 1, id: 1},
                  {name: '選項二', value: 2, id: 2},
                  {name: '選項三', value: 3, id: 3},
                  {name: '選項四', value: 4, id: 4},
                  {name: '選項五', value: 5, id: 5},
                  {name: '選項6', value: 6, id: 6}
              ];
          }

  • HTML部分

    <select multiple
                      ng-init="vm.item8 = []"
                      ng-options="v.name for v in vm.items8 track by v.id"
                      ng-model="vm.item8">
              </select>

  • JavaScript部分

    vm.items8 = [
              {name: '選項一', value: 1, id: 1},
              {name: '選項二', value: 2, id: 2},
              {name: '選項三', value: 3, id: 3},
              {name: '選項四', value: 4, id: 4},
              {name: '選項五', value: 5, id: 5}
          ];

  • 咱們使用了下拉框的多選模式，這樣就能夠更清楚地看到咱們說的爲何要使用track by這個關鍵字的緣由，在demo7中，咱們沒有使用track by，咱們將demo7下拉框的model值初始化爲一個數組，而且有一個輔助的函數changeItems，模擬下拉框的選項變化；當咱們選中一些選項後，點擊更新按鈕，會發現以前的選擇已經被清零了；當是當咱們使用了track by以後，就像demo8中的示例那樣，當咱們選中了一些選項以後，再次點擊更新按鈕，會發現以前選擇的選項依舊仍是存在的。

• label for value in array | orderBy : expr track by trackexpr

  • 咱們也能夠在後面的表達式語句中使用orderBy過濾器，使用過濾器的好處是，讓下拉框的選項按照咱們的要求進行進行排列，讓咱們使用起來更加方便。

  • HTML部分

    <select ng-init="vm.item9 = vm.items9[vm.items9.length - 1]"
                    ng-options="v.name for v in vm.items9 | orderBy: ['value'] track by v.id"
                    ng-model="vm.item9">
            </select>

  • JavaScript部分

    vm.items9 = [
            {name: '選項一', value: 5, id: 1},
            {name: '選項二', value: 4, id: 2},
            {name: '選項三', value: 3, id: 3},
            {name: '選項四', value: 2, id: 4},
            {name: '選項五', value: 1, id: 5}
        ];

  • 首先咱們的數據部分和上面的不同，咱們將數據中的value部分進行了倒序，而後又在表達式中使用orderBy過濾器，而且按照value值進行排序；關於orderBy過濾器的使用方法能夠參考官網。還要注意的是，咱們也給這個下拉框的model初始化了一個值，否則這個下拉框會有一個空白的選項，給用戶的的體驗很很差；固然咱們也是根據數據的特徵使用了ng-init="vm.item9 = vm.items9[vm.items9.length - 1]"進行初始化。

關於下拉框要循環的是對象的狀況基本上和上面的差很少，你們能夠自行看官網上的說明，好了就先到這裏了。