如何顯示特定於所選下拉選項的項目？

我有一個遊戲下拉列表，根據您選擇的遊戲，它應該顯示我需要爲該遊戲做的事情列表。我的問題是獲取列表來顯示只有當前選擇的遊戲的步驟。這可以用ng-model來完成，我是否需要使用函數，還是有更簡單的方法來完成這個工作？如何顯示特定於所選下拉選項的項目？

另外，在我的示例中是否有任何信息會在利用提供的建議後變得多餘？

HTML

<select> 
    <option ng-repeat="game in things.toBeat">{{ game.title }}</option> 
</select> 
<ul> 
    <li ng-repeat="step in things.toDo">{{ step.todo }}</li> 
</ul>

var games = [ 
    { "id" : "0", "title" : "Super Mario Bros." }, 
    { "id" : "1", "title" : "Pac-man" } 
]; 

var todos = [ 
    { "gameID" : "0", "todo" : "Collect coins" }, 
    { "gameID" : "0", "todo" : "Rescue princess" }, 
    { "gameID" : "1", "todo" : "Eat dots" }, 
    { "gameID" : "1", "todo" : "Eat fruit" } 
]; 

$scope.things = { "toBeat" : games, "toDo" : todos };

來源

2015-09-29 Joseph Webber

首先，你需要給遊戲選擇NG-模型，因此第二個 '待辦事項' NG重複可能是意識到了什麼遊戲被選中：

<select ng-model="selectedGame">

然後，您需要給selectedGame的選項選擇遊戲的id值，以便「selectedGame」將具有該id的值。

<option ng-repeat="game in things.toBeat" value="{{game.id}}">{{ game.title }}</option>

最後，告訴到「待辦事項」 NG-重複根據selectedGame價值應用的過濾器，每個「步驟」的遊戲ID字段匹配它。

<li ng-repeat="step in things.toDo | filter: {gameID:selectedGame}">{{ step.todo }}</li>

最後的代碼應該是這樣的：

<select ng-model="selectedGame"> 
    <option ng-repeat="game in things.toBeat" value="{{game.id}}">{{ game.title }}</option> 
</select> 
<ul> 
    <li ng-repeat="step in things.toDo | filter: {gameID:selectedGame}">{{ step.todo }}</li> 
</ul>

我希望它能幫助

編輯：

如果你想設置，你可以使用NG默認selectedGame -init：

<select ng-model="selectedGame" ng-init="selectedGame='0'">

來源

2015-09-29 19:44:06 aFerrer

非常時髦，但我如何使第一個選項默認選中？我試過'ng-init =「selectedGame = selectedGame || options [0]」''''ng-init =「game = options [0]」''和'ng-init =「options [0]」' 。 –

對不起，這是工作：ng-init =「selectedGame ='0'」 – aFerrer

我剛剛用ng-init解決方案更新了答案 – aFerrer

如何顯示特定於所選下拉選項的項目？

回答

相關問題