1

我在选择和列表之间有一个简单的 Angular 过滤器设置。当用户从下拉列表中选择一个项目时，列表会更新以显示匹配结果。问题是我在下拉列表中首先有一个“选择...”选项，没有值，当这是选定的值时，会显示所有项目。我想这是有道理的，但我想要相反。如果所选选项没有价值，我不想显示列表。以下是一些相关位，然后是完整小提琴的链接：

下拉列表：

<select class="world-list" ng-model="selectedWorld" ng-options="world.worldId as world.worldName for world in allWorlds">
    <option value="">Select...</option>
</select>

名单：

<ul class="unstyled" id="charList">
    <li ng-repeat="char in characters | filter:selectedWorld">
        <a href="#" class="btn btn-block" ng-click="selectChar()">{{char.charName}} - {{char.charRace}} {{char.charClass}}</a>
    </li>
</ul>

这是完整小提琴的链接，其中包含驱动所有这些的我的 JSON 结构：http: //embed.plnkr.co/6XUmC5efO0Y1BRNLRUig

我正在尝试做的事情相当简单，而且我对 Angular 还是很陌生，所以我确信我遗漏了一些明显的东西。检查了 Jabbr 房间，没有人在。:(

无论如何，感谢您的任何帮助！

4

2 回答 2

3

实现此目的的一种方法是按迭代对象的特定属性进行过滤：

<ul class="unstyled" id="charList">
  <li ng-repeat="char in characters | filter:{worldId: selectedWorld}">
    <a href="#" class="btn btn-block" ng-click="selectChar()">{{char.charName}} - {{char.charRace}} {{char.charClass}}</a>
  </li>
</ul>

普朗克

于 2013-03-06T17:44:57.373 回答
0

我注意到在您的代码“script.js”中您似乎没有考虑空白选项。

我没有对此进行测试（我可能应该在提出这个答案之前），但它应该通过在你的 script.js 中放置“空白”选项来工作。

app.controller('WorldCtrl', function ($scope, $http) {
    $scope.allWorlds = [{
      worldId: "",
      worldName: ""
    },
    {
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff",
      worldName: "World 1"
    },
    {
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84",
      worldName: "World 2"
    },
    {
      worldId: "df41208e-e8d2-46c9-8299-8f37632a51f8",
      worldName: "World 3"
    }];

    $scope.characters = [{
      charClass: "Rogue",
      charName: "Vaes",
      charRace: "Human",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Warrior",
      charName: "Azash",
      charRace: "Orc",
      worldId: "b8ee0530-744b-463e-9428-23178f6c7bff"
    },
    {
      charClass: "Mage",
      charName: "Anele",
      charRace: "Ogre",
      worldId: "81211982-5613-4f9c-b704-7b6fa35faf84"
    }];
});
于 2013-03-06T17:37:32.070 回答