在 ng-options 中隐藏一个选项答案

【问题标题】：hiding an option in ng-options在 ng-options 中隐藏一个选项
【发布时间】：2014-07-15 14:47:04
【问题描述】：

我对 Angular 还是很陌生，正在尝试 ng-options。在我的控制器中，我有：

$scope.permissionLevels = [
    { value: "ROLE_READ", text: "Read Only" },
    { value: "ROLE_WRITE", text: "Write" }
];

在我的模板中，我有：

<select ng-options="permissionLevel.text for permissionLevel in permissionLevels"
        ng-model="selectedValue"></select>

根据视图，我想隐藏读取或写入。所以在我的控制器中，我有另一个标志，指示它是什么视图。在我使用 ng-options 之前，我有一个正常的选择下拉菜单并做了这样的事情：

<select>
    <option>Read Only </option>
    <option ng-show="shouldShowWrite">Write </option>
</select>

有没有办法用 ng-options 做到这一点？谢谢。

【问题讨论】：

为什么不根据视图来操作数组$scope.permissionLevels？
如果数组在多个地方使用，那么更改它可能会产生不必要的副作用。

标签： javascript angularjs

【解决方案1】：

您可以在 ngOptions 表达式中使用过滤器：

<select ng-model="selectedValue"
        ng-options="permissionLevel.text for permissionLevel in 
                    permissionLevels | filter:shouldShow">
</select>

并在控制器中为 $scope 定义 shouldShow() 函数：

$scope.shouldShow = function (permissionLevel) {
  // put your authorization logic here
  return $scope.permission.canWrite || permissionLevel.value !== 'ROLE_WRITE';
}

完整示例见：http://plnkr.co/edit/8FkVktDXKGg3MQQawZCH

【讨论】：

【解决方案2】：

考虑 ngRepeat 以获得该级别的控制。我认为 ngOptions 不可能。

 <select ng-model="selectedValue">
    <option ng-repeat="permissionLevel in permissionLevels" value="{{permissionLevel.text}}" ng-show="shouldShowWrite(permissionLevel)">
      {{permissionLevel.text}}
    </option>
  </select>

【讨论】：

【解决方案3】：

请检查下面的代码，它可能会帮助您解决问题！

<select>
<option>Read Only </option>
<option ng-show="selectedValue.value=='ROLE_WRITE'">Write </option>
</select>

【讨论】：

问题表明这种方法已经被使用过，并且需要使用 ng-option 的东西（如果可能的话）。