javascript - 在 ng-options 中隐藏一个选项

Question

我是 Angular 的新手，正在尝试 ng-options。在我的 Controller 中，我有:

$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>

根据 View ，我想隐藏读或写。所以在我的 Controller 中，我有另一个标志表明它是什么 View 。在我使用 ng-options 之前，我有一个正常的选择下拉菜单并做了如下操作:

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

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

Answer 1

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

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

并在 Controller 中为 $scope 定义 shouldShow() 函数:

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

有关完整示例，请参阅:http://plnkr.co/edit/8FkVktDXKGg3MQQawZCH