Question

我有一个游戏下拉列表，根据您选择的游戏，它应该显示我需要为该游戏做的事情列表。我的问题是让列表显示仅当前所选游戏的步骤。这可以用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>

JS

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 };

Answer 1

首先，您需要让游戏选择一个ng-model，以便第二个＆tuto＆＃39; ng-repeat可以知道选择了什么游戏：

<select ng-model="selectedGame">

然后你需要给selectedGame的选项选择游戏的id值，然后选择游戏＆＃34;将具有该id的值。

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

最后，你告诉'todo＆＃39; ng-repeat根据selectedGame值应用过滤器，将其与每个步骤的gameID字段相匹配。

<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>

我希望它有所帮助

修改

如果要设置默认的selectedGame，可以使用ng-init：

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

如何显示特定于所选下拉选项的项目？

1 个答案: