Is it possible to hide select box options using the ng-hide directive?
<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>
AngularJS 1.1.5 has a directive ng-if
which can work for you. Check this fiddle http://jsfiddle.net/cmyworld/bgsVw/
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:
<div ng-app ng-controller="Controller">
<select ng-model="selectedOption" ng-options="o for o in options"></select>
{{selectedOption}}
</div>
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;
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.