CODEWITHSUNDEEP
angularjsdrop-down-menu
A. A.
A. A.

Reputation: 153

Need to remove dropdown options after flag changed

I am using select in angularJS also used group by to show it in group. I am using flag which comes from a database, if flag is false i want to hide some options, else if true want to show the options. My flag takes some time to come before that select is get rendered hence option is not getting hide. how to remove those options after i get my flag from database.

<select class="form-control margin-bottom-20" ng-model="tempfilter"
        ng-change="tempFilterChange()"
        ng-options="color.name group by color.shade for color in colorOptions | 
                    filter:notAnOption=true">
     <option value="" selected="selected">View All</option>
</select>

In .JS

$scope.filterOptions = [           
     { value: "1", name: 'black', shade: 'dark', notAnOption: $scope.isWall },
     { value: "2", name: 'red', shade: 'dark', notAnOption: $scope.isWall },
     { value: "3", name: 'green', shade: 'not dark', notAnOption: $scope.isWall },
     { value: "4", name: 'yellow', shade: 'not dark', notAnOption: true },
     { value: "1", name: 'blue', shade: 'not dark', notAnOption: true }
 ];

Upvotes: 0

Views: 224

Answers (2)

georgeawg
georgeawg

Reputation: 48948

The controller needs to re-compute the filter options whenever the $scope.isWall property changes:

app.controller("ctrl", function($scope) {
  function filterOptions() {
    return [           
     { value: "1", name: 'black', shade: 'dark', notAnOption: $scope.isWall },
     { value: "2", name: 'red', shade: 'dark', notAnOption: $scope.isWall },
     { value: "3", name: 'green', shade: 'not dark', notAnOption: $scope.isWall },
     { value: "4", name: 'yellow', shade: 'not dark', notAnOption: true },
     { value: "1", name: 'blue', shade: 'not dark', notAnOption: true }
    ];
  };
  //INITIALIZE colorOptions
  $scope.colorOptions = filterOptions();
  //UPDATE colorOption
  $scope.wallChange = function() {
    $scope.colorOptions = filterOptions();
    console.log($scope.colorOptions);
  }
})

The DEMO on PLNKR

Upvotes: 1

FarukT
FarukT

Reputation: 1668

in filter of ng-options you can call a function that return a boolean result.

try in this way

    <select class="form-control margin-bottom-20" ng-model="tempfilter"
            ng-change="tempFilterChange()"
ng-options="color.name group by color.shade for color in filterOptions | filter:isNotAnOption">
         <option value="" selected="selected">View All</option>
    </select>



$scope.filterOptions = [           
     { value: "1", name: 'black', shade: 'dark', notAnOption: $scope.isWall },
     { value: "2", name: 'red', shade: 'dark', notAnOption: $scope.isWall },
     { value: "3", name: 'green', shade: 'not dark', notAnOption: $scope.isWall },
     { value: "4", name: 'yellow', shade: 'not dark', notAnOption: true },
     { value: "1", name: 'blue', shade: 'not dark', notAnOption: true }
 ];


$scope.isNotAnOption = function(element){
return element.notAnOption && element.notAnOption === true;
}

Upvotes: 0

Related Questions