CODEWITHSUNDEEP
javascriptangularjs
ibhhvc
ibhhvc

Reputation: 265

AngularJS: Easiest way to tell if no inputs (of various types) are true

I'm building filters for dynamic tables and haven't come up with an elegant way to tell the Angular that no filters are set.

Say I have a series of checkboxes. If you check one, it shows items that match that checkbox value. If you check two, it shows you items that match either one or the other.

When none are checked, I want to display all items.

So far I just awkwardly check all the filters:

if(!filter.one && !filter.two && !filter.three){
    return;
}

As I build more filters, this gets annoying.

What I would love to do is set up a double model like this:

<input type="checkbox" ng-model="filter.one; filterSet"/>

This way, each checkbox not only tells me that the specific filter is set, it also tells me that a filter — any filter — is set.

Since AngularJS doesn't support this, is there any easy way to check if any of my checkboxes or radios have been set or not?

Upvotes: 1

Views: 41

Answers (1)

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

Not sure if theres a more elegant way to do this but one approach I would take is to make a list of input objects with an id/value/other properties.

Then you can just ng-repeat those checkboxes (or manually put them in one at a time assuming you know their position in the list). This will also allow you to loop through the list of inputs and have the loop check their value (instead of a long if statement).

this way, when you want to add a new checkbox, make a new object in the list, and the loop will automatically check its value for you. Check out this fiddle: https://jsfiddle.net/ahmadabdul3/84esk49L/1/

you can also give each input object its own functions depending on what functionality it should perform. Also, probably make these inputs into their own service or factory.

updated fiddle with similar logic to what you need: https://jsfiddle.net/ahmadabdul3/84esk49L/2/

Upvotes: 1

Related Questions