AngularJs級聯下拉選擇不同

-2

我有一個頁面上輸出汽車列表。此列表中的結果來自Json文件。AngularJs級聯下拉選擇不同

這是我的Json的例子：

[ 
    { 
    "id": "1590", 
    "brand": "Peugeot", 
    "type": "508" 
    }, 
    { 
    "id": "1591", 
    "brand": "Peugeot", 
    "type": "308" 
    }, 
    { 
    "id": "1594", 
    "brand": "Honda", 
    "type": "Civic" 
    }, 
    { 
    "id": "1605", 
    "brand": "Renault", 
    "type": "Clio" 
    }, 
    { 
    "id": "1607", 
    "brand": "Renault", 
    "type": "Laguna" 
    } 
]

我需要通過例如過濾結果品牌和類型。所以我有兩個名爲'selectedBrand'和'selectedType'的DropDown列表。

我用這個標記的單品牌裝入的下拉列表：

<select id="brands" data-ng-model="selectedBrand" data-ng-options="car.brand for car in cars | unique:'brand' | orderBy:'brand'"> 
</select>

這個工作好，給我以獨特的品牌，就像一個SELECT DISTINCT一個下拉列表。

現在我想第二個DropDown列表被過濾，當第一個有一個選定的值。這是標記我有第二個下拉列表：

<select id="type" data-ng-model="selectedType" data-ng-options="car.type for car in cars | filter:{brand:selectedBrand} | unique:'type' | orderBy:'type'"> 
</select>

但是，這是行不通的。它顯示了每個品牌類型的完整列表。

我想我需要一些方法來觸發它，當第一個DropDown列表更改？我很喜歡AngularJs，所以任何幫助將不勝感激。

我不知道這是否是從Json結果中獲取這些DISTINCT值的最佳方法。我只有這個完整的Json結果集和所有的數據，這就是我必須使用的。

來源

2014-05-21 Daniel Plomp

您可以發佈一個小提琴？ – faby

是的，當然。這是一個小提琴：http://jsfiddle.net/7p7tM/6/ –

繼the docs你需要一個ng-model-options="{ updateOn: 'your option here' }"做這個綁定

來源

2014-05-21 12:14:29

AngularJs級聯下拉選擇不同

回答

相關問題