CODEWITHSUNDEEP
javascriptangularjsdirective
ThinkingInBits
ThinkingInBits

Reputation: 11472

Using ng-hide or ng-show on select box option

Is it possible to hide select box options using the ng-hide directive?

http://jsfiddle.net/cr4UB/

<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown">
          <option value="one">One</option>
          <option value="two" ng-hide="myDropDown=='one'">Two</option>
          <option value="three">Three</option>
    </select>

    {{myDropDown}}
</div>

Upvotes: 11

Views: 29144

Answers (2)

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21748

I couldn't get it to work using ng-hide to check the value of your ng-model (likely some race-condition with reading/writing to the same model at once), however, I did come up with a working example of the functionality you're after:

View markup

<div ng-app ng-controller="Controller">
    <select ng-model="selectedOption" ng-options="o for o in options"></select>

    {{selectedOption}}
</div>

Controller

function Controller ($scope) {
    var initialOptions = ['One', 'Two', 'Three'];

    $scope.options = initialOptions;
    $scope.selectedOption = $scope.options[2]; // pick "Three" by default

    $scope.$watch('selectedOption', function( val ) {
        if( val === 'One' ) {
            $scope.options = ['One', 'Three'];
        } else {
            $scope.options = initialOptions;
        }
    });
}

Upvotes: 2

Chandermani
Chandermani

Reputation: 42669

AngularJS 1.1.5 has a directive ng-if which can work for you. Check this fiddle http://jsfiddle.net/cmyworld/bgsVw/

Upvotes: 18

Related Questions