Как я могу показать элементы, относящиеся к выбранному варианту выпадающего меню?

Question

Как я могу показать элементы, относящиеся к выбранному варианту выпадающего меню?

0

У меня есть раскрывающийся список игр, и в зависимости от выбранной вами игры он должен показать список вещей, которые мне нужно сделать для этой игры. Моя проблема заключается в получении списка, чтобы показать шаги только для текущей выбранной игры. Можно ли это сделать с помощью ng-модели, мне нужно будет использовать функции, или есть еще более простой способ сделать это?

Кроме того, есть ли какая-либо информация, включенная в мой образец, которая станет излишней после использования предоставленных предложений?

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

Joseph Webber 29 сен. 2015, в 21:11

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

aFerrer · Accepted Answer · 2015-09-29T18-08-00.000Z

Сначала вам нужно дать игрокам выбрать ng-модель, чтобы второй "todo" ng-repeat мог знать, какая игра выбрана:

<select ng-model="selectedGame">

Затем вам нужно указать опции selectedGame, чтобы выбрать значение id для игр, поэтому "selectedGame" будет иметь значение этого идентификатора.

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

наконец, вы указываете "todo" ng-repeat применять фильтр в соответствии с выбранным значением Game, сопоставляя его с полем 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>

Я надеюсь, что это помогает

Редактировать:

Если вы хотите установить выбранный по умолчанию вариант, вы можете использовать ng-init:

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

Довольно шикарно, но как мне сделать первый вариант выбранным по умолчанию? Я пробовал ng-init="selectedGame=selectedGame||options[0]" , ng-init="game=options[0]" и ng-init="options[0]" но ни один из них не работал.
Извините, это обходной путь: ng-init = "selectedGame = '0'"
Я только что обновил ответ с помощью решения ng-init
Это прекрасно, спасибо большое! Я все еще довольно новичок в Angular, поэтому такие мелочи имеют большое значение.