Remove or hide specific items in select list using ng-options in AngularJS

Question

I would like to remove/hide a few options from a select list that uses ng-options. In my list I have 18 items and I simply want to remove 6 of them from the list but without deleting them (their in my database being used elsewhere). I don't want the user to be able to see them in this list. Is there a way to loop thru and hide them using ng-options?

In my html:

<div class="col-xs-12 col-md-{{model.data.colSize}}" ng-show="model.data.passionPointFilter">
            <select class="region-filter form-control"
                    ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items">
                <option value="">All Interest</option>
            </select>
        </div>

In my Controller:

if (model.data.passionPointFilter) {
            txThingsToDo.loadAll().then(function (thingstodo) {
                model.passionPoints.loading = false;
                model.passionPoints.items = thingstodo.results;
            });

I would like to remove for example the last 3

<select class="region-filter form-control ng-pristine ng-valid ng-touched" 
                    ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items">
            <option value="" class="">All Interest</option>
            <option value="0" label="Ranches &amp; Rodeos">Ranches &amp; Rodeos</option>
            <option value="1" label="Beaches">Beaches</option>
            <option value="2" label="Arts &amp; Culture">Arts &amp; Culture</option>
            <option value="3" label="Family">Family</option>
            <option value="4" label="Golf">Golf</option>
            <option value="5" label="Historic">Historic</option>
                </select>

@Santhi Kumar - I tried your code, however nothing happens. I even tried to console.log it out and still no affect. — Tahara Ezell
– Tahara Ezell, Commented Mar 21, 2017 at 20:23

Sam · Accepted Answer · 2017-03-21 16:31:11Z

1

You can use filter in ng-options <select class="region-filter form-control ng-pristine ng-valid ng-touched" ng-model="model.selections.passionPoint" ng-options="item.id as item.title for item in model.passionPoints.items | filter: filterItems"> "filterItems" is a function which should be in the controller

$scope.filterItems = function(item){
   //write the logic based on the requirement.
   return item.id <= $scope.model.passionPoints.items.length-3
}

edited Mar 21, 2017 at 16:31

answered Mar 21, 2017 at 16:23

Sam

2,4259 gold badges35 silver badges54 bronze badges

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

Comments

Dillon Kissoon · Accepted Answer · 2017-03-21 15:10:02Z

0

You can use ng-if or ng-show

For example:

    var myArray = [{
      id: 1,
      name: 'value1'
    }, {
      id: 2,
      name: 'value2'
    }, {
      id: 3,
      name: 'value3'
    }];

    <span ng-repeat="obj in myArray" ng-if="obj.id > 2">{{obj.name}}</span>
    <span ng-repeat="obj in myArray" ng-show="obj.id > 2">{{obj.name}</span>

In the above example value3 will be printed to the screen.

edited Mar 21, 2017 at 15:10

answered Mar 21, 2017 at 15:03

Dillon Kissoon

11 silver badge1 bronze badge

Comments

Tahara Ezell · Accepted Answer · 2017-03-24 15:02:43Z

I was able to create an if statement to loop through and remove unwanted select statements. Its a round about way, but it works perfectly. I didnt have to modify anything within the html. If there is a better way, I'm open for suggestions.

if (model.data.passionPointFilter) {
            txThingsToDo.loadAll().then(function (thingstodo) {
                model.passionPoints.loading = false;
                for (var i = 0; i < thingstodo.results.length; i++) {
                    //Hide unwanted passionpoints from list.
                    if (thingstodo.results[i].id != "tex-plorer" &&
                        thingstodo.results[i].id != "films" &&
                        thingstodo.results[i].id != "tx-food-and-drink" &&
                        thingstodo.results[i].id != "tx-music" &&
                        thingstodo.results[i].id != "tx-beaches" &&
                        thingstodo.results[i].id != "tx-outdoors" &&
                        thingstodo.results[i].id != "chisholmtrail") {
                        model.passionPoints.items.push(thingstodo.results[i]);
                    }
                }
            });

Collectives™ on Stack Overflow

Remove or hide specific items in select list using ng-options in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related