在选择框选项上使用 ng-hide 或 ng-show 选项

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

本文关键字：选项 ng-hide ng-show 选择      更新时间：2023-09-26

是否可以使用 ng-hide 指令隐藏选择框选项？

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>

AngularJS 1.1.5有一个指令ng-if可以为你工作。检查这个小提琴 http://jsfiddle.net/cmyworld/bgsVw/

我无法使用ng-hide来检查ng-model的值（可能是一次读取/写入同一模型的一些竞争条件），但是，我确实提出了您所追求的功能的工作示例：

查看标记

<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;
        }
    });
}
相关文章：