AngularJS filter on empty string

Question

I have a simple Angular filter setup between a select and a list. 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

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. Checked the Jabbr room, nobody on. :(

Anyway, thanks for any and all help!

Stewie · Accepted Answer · 2013-03-06 17:44:57Z

3

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>

Plunker

answered Mar 6, 2013 at 17:44

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James McConnell Over a year ago

Worked like a charm! Thanks, stewie. :)

chrismarx Over a year ago

with 1.1.5 this no longer works -- here's the fork of the plunker with 1.1.5

Mark Coleman · Accepted Answer · 2013-07-10 19:32:15Z

0

I noticed in your code "script.js" you don't seem to be accounting for the blank option.

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.

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

edited Jul 10, 2013 at 19:32

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

answered Mar 6, 2013 at 17:37

Javamav

1532 silver badges6 bronze badges

1 Comment

James Skemp Over a year ago

Won't take my edit since it's just a spacing issue, but add four spaces or a tab before your last line and your app.controller line to fix the formatting. And yes, testing before posting an answer is generally a good thing :)

Collectives™ on Stack Overflow

AngularJS filter on empty string

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related