用ng-options從數據對象中的數組中檢索項目

我有一個汽車製造和模型的對象。每個品牌都有不同的型號。我正在嘗試構建一個搜索表單，讓用戶優化他的搜索。當用戶在select中選擇make時，make字段應該自動填充與此make相對應的類型。這就是我要做的事：用ng-options從數據對象中的數組中檢索項目

$scope.myForm = [ 
 
     { 
 
      Make: 'AUDI', 
 
      Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7'] 
 
     }, { 
 
      Make: 'BMW', 
 
      Type: ['316', '318', '320', '323', '325', '330'] 
 
     }, { 
 
      Make: 'TOYOTA', 
 
      Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux'] 
 
     } 
 
    ]

<h2>Search</h2> 
 
     <form class="form-inline"> 
 
      <div class="form-group"> 
 

 
       <label for="makeSelect">Make</label> 
 
       <select ng-model="myForm.Make" class="form-control" ng-options="form.Make for form in myForm "> 
 
        <option value="" id="makeSelect">Select your make</option> 
 
       </select> 
 

 
       <label for="typeSelect">Type</label> 
 
       <select ng-model="myForm.Type" class="form-control" ng-options="form.type for form in myForm.Type | filter:myForm.Make"> 
 
        <option value="" id="typeSelect">Select your type</option> 
 
       </select> 
 

 
      </div> 
 
     </form>

它不工作，任何想法？

來源

2015-06-28 Pierreaz

究竟是什麼問題？ –

它不起作用 – Pierreaz

首先，嘗試使用有意義的名稱。通過使用錯誤的名稱並將選項和選定的選項存儲在同一位置，可能會使自己感到困惑。因此，讓我們將可用的汽車存儲在名爲cars的變量中。而且，我們的選擇車存放在selectedCar：

$scope.cars = [ 
    { 
     Make: 'AUDI', 
     Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7'] 
    }, { 
     Make: 'BMW', 
     Type: ['316', '318', '320', '323', '325', '330'] 
    }, { 
     Make: 'TOYOTA', 
     Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux'] 
    } 
];

和

<select ng-model="selectedCar" class="form-control" ng-options="car.Make for car in cars"> 
    <option value="" id="makeSelect">Select your make</option> 
</select>

現在第二個選擇要顯示所有類型選擇車。選定的汽車存儲在selectedCar變量中。所選擇的類型將被存儲在一個名爲selectedType變量：

<select ng-model="selectedType" class="form-control" ng-options="type for type in selectedCar.Type"> 
    <option value="" id="typeSelect">Select your type</option> 
</select>

的代碼也會更清楚，如果你用複數形式：types，而不是Type。

Working plunker：http://plnkr.co/edit/Mm30HjQkgEOhJbZkyMic?p=preview

來源

2015-06-28 13:55:06

感謝您的快速回復。你能解釋一件事嗎？類型數組在汽車對象中，它是如何進入selectedCar對象的？ – Pierreaz

這就是ng-model的全部內容：它允許在一個範圍變量中存儲選定的選項（或輸入文本或輸入文本時輸入的文本）。 –

好的，現在我明白了，非常感謝你的解釋。 – Pierreaz

試試看看這個代碼。

$scope.myForm = [ 
 
     { 
 
      Make: 'AUDI', 
 
      Type: ['A1', 'A2', 'A3', 'A4', 'A5', 'A6', 'A8', 'Q3', 'Q5', 'Q7'] 
 
     }, { 
 
      Make: 'BMW', 
 
      Type: ['316', '318', '320', '323', '325', '330'] 
 
     }, { 
 
      Make: 'TOYOTA', 
 
      Type: ['Avensis', 'Carina', 'Starlet', 'Landcruiser', 'Aygo', 'Hilux'] 
 
     } 
 
    ]

<h2>Search</h2> 
 
     <form class="form-inline"> 
 
      <div class="form-group"> 
 

 
       <label for="makeSelect">Make</label> 
 
       <select ng-model="myForm.Make" class="form-control" ng-options="form.Make for form in myForm "> 
 
        <option value="" id="makeSelect">Select your make</option> 
 
       </select> 
 

 
       <label for="typeSelect">Type</label> 
 
       <select ng-model="myForm.Type" class="form-control" ng-options="type in myform.filter(function(e) { e.Make == myForm.Make })[0].Type"> 
 
        <option value="" id="typeSelect">Select your type</option> 
 
       </select> 
 

 
      </div> 
 
     </form>

來源

2015-06-28 13:52:13 Tomzan

用ng-options從數據對象中的數組中檢索項目

回答

相關問題