Question

我在select和list之间设置了一个简单的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房间，没人在。：（

无论如何，感谢任何和所有的帮助！

Answer 1

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

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

Plunker

Answer 2

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

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

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"
    }];
});

AngularJS过滤空字符串

2 个答案: