如何根據從另一個下拉列表中選擇來篩選下拉結果？

我想按州和/或縣過濾項目。我能夠做到這一點，但我想添加的是，只顯示與所選狀態有關的德縣的功能，如果沒有選擇狀態，則顯示所有可用的縣。我非常確定我必須使用可觀測值，但不能想到這樣做（開始瞭解可觀測值）。如果在不使用可觀察屬性的情況下有更好的方法實現這一點，請解釋如何。如何根據從另一個下拉列表中選擇來篩選下拉結果？

實施例：

如果選擇佛羅里達，則僅縣邁阿密和奧蘭多應該在縣下拉。

這是我的時刻：

的JavaScript：

App = Ember.Application.create(); 

App.Router.map(function() { 
    // put your routes here 
}); 

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return Ember.A(

    [ 
     Ember.Object.create({ name: "John", county: "Miami", state: "Florida" }), 
     Ember.Object.create({ name: "Sam", county: "Orlando", state: "Florida" }), 
     Ember.Object.create({ name: "Tim", county: "Los Angeles", state: "California" }), 
     Ember.Object.create({ name: "Liam", county: "San Francisco", state: "California" }) 
    ]); 
    } 
}); 

App.IndexController = Ember.ArrayController.extend({ 
    counties: function(){ 
    return this.get('model').getEach('county').uniq(); 
    }.property(), 

    states: function(){ 
    return this.get('model').getEach('state').uniq(); 
    }.property(), 



    filtered: function(){ 
    var country = this.get('country'); 
    var state = this.get('state'); 

    var model = this.get('model'); 
    if(country){ 
     model = model.filterBy('country', country); 
    } 
    if(state){ 
     model = model.filterBy('state', state); 
    } 

    return model;  
    }.property('country', 'state') 
});

HTML：提前

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Ember Starter Kit</title> 
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script> 
    <script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script> 
</head> 
<body> 

    <script type="text/x-handlebars"> 
    {{outlet}} 
    </script> 

    <script type="text/x-handlebars" id="index"> 
    <h1>Non Filtered</h1> 
    <ul> 
    {{#each person in model}} 
    <li>{{person.name}}({{person.county}}, {{person.state}})  
    </li> 
    {{/each}} 
    </ul> 

    <h1>Filtered</h1> 
    Counties: {{view "select" content=counties value=county prompt="Pick one..."}} 
    States: {{view "select" prompt="Pick one..." content=states value=state}} 

    <ul> 
    {{#each person in filtered}} 
    <li>{{person.name}}({{person.county}}, {{person.state}})  
    </li> 
    {{/each}} 
    </ul> 

    </script> 
</body> 
</html>

JSBin

謝謝！

來源

2015-02-10 FutoRicky

你能提供基於數據所期望的行爲的例子嗎？例如「選擇__時，_____應該發生」 – wolfemm 2015-02-10 22:50:27

我很抱歉，我通過提供國家和州來使用不正確的示例。它應該是States和Countys。我想要的是當選擇佛羅里達州時，可供選擇的縣應該是邁阿密，奧蘭多，李縣等......現在就去編輯它。 – FutoRicky 2015-02-11 00:58:45

你需要創建一個州到縣的映射（告訴它哪個縣的映射到哪個州）。然後，您可以使用該映射來過濾您爲縣下拉菜單顯示的縣。

stateToCountyMapping: [ 
    Ember.Object.create({ state: 'Florida', 
        counties: ['Miami', 'Orlando']}), 
    Ember.Object.create({ state: 'California', 
        counties: ['Los Angeles', 'San Francisco']}) 

], 
counties: function(){ 
    var counties = this.get('model').getEach('county').uniq(); 
    var state = this.get('state'); 

    if(state){ 
    var mapping = this.get('stateToCountyMapping').findBy('state', state); 
    counties = counties.filter(function(county){ 
     return mapping.get('counties').contains(county); 
    }) 
    } 

    return counties; 
}.property('state')

工作演示here

UPDATE

如果你不希望添加映射另一個屬性，你可以做到以下幾點：

counties: function(){ 
    var counties = this.get('model').getEach('county').uniq(); 
    var state = this.get('state'); 

    if(state){ 
    counties = this.get('model').filter(function(record){ 
     return record.get('state') === state; 
    }).mapBy('county').uniq(); 
    } 

    return counties; 
}.property('model', 'state'),

基本上，過濾器模型中的每條記錄都基於所選擇的狀態，然後只取這些縣，然後確保它們是唯一的。

工作演示here

來源

2015-02-11 03:49:21 Kalman

我想在不添加屬性的情況下實現此目的。它將如何使用既定的屬性和值？ – FutoRicky 2015-02-11 19:23:13

恩，Ember應該知道哪些州屬於哪個州？ :) – Kalman 2015-02-11 19:34:44

就像驗證每個具有選定狀態的項目一樣，只需添加該縣。這可能嗎？ – FutoRicky 2015-02-11 19:38:59

如何根據從另一個下拉列表中選擇來篩選下拉結果？

回答

相關問題