My friend Anthony posted a question the other day about how to bind two select inputs together. Using that as a starting point, I dug into a few fun things that you can do with AngularJS filters and supporting cast.
Paleo edition shout out to my bro Ben Nadel who happens to be one of my favorite bloggers. Check him out here http://www.bennadel.com/
Code can be downloaded here https://github.com/simpulton/angularjs-filters-paleo
I hope you like it and thanks for the great question Anthony!
This is really cool. I have to admit, I have definitely shied away from filters. I never really understood the syntax well and I just kind of never went at them. But, your examples really make me want to re-think that decision. The grouped-output, especially, seems super powerful! I’ll have to do some more research on filters; one thing that sticks out in my mind is simply how often the filter is applied (as far as the digest lifecycle goes). Very cool stuff!
Also, totally unrelated, I was looking at the docs for ngModel[radio] today and someone in the comments mentioned “ngValue”. Apparently it’s undocumented, but handles booleans a bit better. Not sure if you’ve run across that at all.
Mmmm. Bacon 🙂
At 5:26, had you assigned a default value for $scope.myGroup, you could have said ng-show=”myGroup != null” (or whatever the default value was), and you wouldn’t need to be on the run from the CSS police!
Also, filters are not only for arrays 🙂 They take an input and give an output.
Otherwise, good presentation 🙂
As a newbie to angular, really loving your site.
Good job and keep it up.
I’ve been learning angular, and getting the concept is probably what has been the most challenging coming from jQuery. You just helped me understand the filter and ng-class much better, thank you 🙂
Hey,
I tried what you did there with filters. It works absolutely fine but I faced a little problem which is an absolute nightmare. I have been using Jquery Mobile UI select dropdowns for this and Angular Js for client side functionality for now filters.
The problem is when I change the first dropdown the second dropdown doesn’t go back to the default state. e.i
Eg. 1.Vegetables 2.Carrots
1.Meat 2.Carrots (It still says carrots. I wanted it to return to its default state e.i blank option.)
This only happens when I use Jquery Mobile UI.
Can you please help me with this.
Thank you…