[英]AngularJS filter on empty string
I have a simple Angular filter setup between a select and a list. 我在select和list之间设置了一个简单的Angular过滤器。 When a user selects an item from the dropdown, the list is updated to show the matching result. 当用户从下拉列表中选择项目时,列表会更新以显示匹配结果。 The problem is that I have a "Select..." option first in the dropdown with no value, and when that is the selected value, all items are shown. 问题是我在下拉列表中首先有一个“选择...”选项,没有值,当这是选定值时,显示所有项目。 I suppose that makes sense, but I want the opposite. 我认为这是有道理的,但我想要相反。 If the selected option has no value, I don't want to show the list. 如果所选选项没有值,我不想显示列表。 Here are some relevant bits, followed by a link to a full fiddle: 这里有一些相关的位,后面是一个完整小提琴的链接:
The dropdown: 下拉菜单:
<select class="world-list" ng-model="selectedWorld" ng-options="world.worldId as world.worldName for world in allWorlds">
<option value="">Select...</option>
</select>
The list: 名单:
<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>
And here is a link to the full fiddle, which contains my JSON structures that drives all this: http://embed.plnkr.co/6XUmC5efO0Y1BRNLRUig 这里有一个完整小提琴的链接,其中包含我的JSON结构,驱动所有这些: http : //embed.plnkr.co/6XUmC5efO0Y1BRNLRUig
What I'm trying to do is rather simple, and I'm pretty new to Angular so I'm sure I'm missing something obvious. 我想要做的是相当简单,我对Angular很新,所以我确定我错过了一些明显的东西。 Checked the Jabbr room, nobody on. 检查了Jabbr房间,没人在。 :( :(
Anyway, thanks for any and all help! 无论如何,感谢任何和所有的帮助!
One way to accomplish this is to filter by specific properties of the iteration object: 实现此目的的一种方法是按迭代对象的特定属性进行筛选:
<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>
I noticed in your code "script.js" you don't seem to be accounting for the blank option. 我在你的代码“script.js”中注意到你似乎没有考虑空白选项。
I did not test this (I probably should prior to posing this answer), but it should work by placing the "blank" option within your 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"
}];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.