How to render only visible items in AngularJs Dropdown

Question

I have following AngularJs object:

$scope.control = {'options': [{ "id": 1, "text": "Option 1", "isHidden": 0 }, { "id": 2, "text": "Option 2", "isHidden": 1 }, { "id": 3, "text": "Option 3", "isHidden": 0 }]};

Now, I CAN render a dropdown with all items using following:

<select ng-model="control.uiSelValue" ng-options="option.text for option in control.options" class="form-control"></select>

How can I render only those elements which are marked "isHidden = 0"? i.e. I want to render only "Option 1" and "Option 3" only in Dropdown.

possible duplicate of AngularJS: Filter ng-options not having specific values — leftiness
– leftiness, Commented Nov 11, 2014 at 21:24
You'll want to use filter. docs.angularjs.org/api/ng/filter/filter — Jonathan M
– Jonathan M, Commented Nov 11, 2014 at 21:24

letiagoalves · Accepted Answer · 2014-11-11 21:26:45Z

3

Apply a custom filter to control.options. You really don't need to create this filter since you can use an expression but I think it is a bad practice to make too much logic in the view.

For example:

Demo

View

<select ng-model="control.uiSelValue"
        ng-options="option.text for option in control.options | filter:myFilter"
        class="form-control">
</select>

Controller

$scope.control = {
    options: [{
        "id": 1,
        "text": "Option 1",
        "isHidden": 0
    }, {
        "id": 2,
        "text": "Option 2",
        "isHidden": 1
    }, {
        "id": 3,
        "text": "Option 3",
        "isHidden": 0
    }]
};

$scope.myFilter = function (value) {
    return value.isHidden === 0;
};

answered Nov 11, 2014 at 21:26

letiagoalves

11.3k4 gold badges42 silver badges68 bronze badges

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

3 Comments

Pavlo Over a year ago

+1 for not putting filter logic inside an expression. Though I'd come up with more meaningful name than myFilter.

letiagoalves Over a year ago

I named it myFilter just because its an example :)

Ankur Nigam Over a year ago

Well, I figured it out as soon as I posted. See my first comment.

Collectives™ on Stack Overflow

How to render only visible items in AngularJs Dropdown

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related