Monday, December 28, 2015

My First AngularJS Filter

I'm working on a web project which utilizes AngularJS and today I setup my first search filter on a list of items.

Dang it was simple!!!

The basics:

  1. A <select> list of items populated using a JSON data structure
  2. An <input> field used to filter the list


Here is the main article I used for setting this up: http://sarahbranon.com/post/69604997957/fun-with-angularjs-filters-part-1-the-filter. It has a lot of great information so read up!

Now that I've learned that, I can apply it to my mobile apps to filter the many "list-based mobile apps" I have built with Ionic and AngularJS. :)

Issues I ran into?

  • Initially the search filter was displaying more items than it should because it was filtering on any string that I was entering. It looked throughout the entire JSON structure to match that string.
    • FIX: pass a model which is an object instead of a string (About half way down Sarahs article)

<input ng-model="search">
<li ng-repeat="friend in friends | filter:{ name: search }">
  {{friend.name}}
</li>



No comments:

Post a Comment