如何在AngularJs Dropdown中仅呈现可见项目

Question

我有以下 AngularJs 对象：

$scope.control = {'options': [{ "id": 1, "text": "Option 1", "isHidden": 0 }, { "id": 2, "text": "Option 2", "isHidden": 1 }, { "id": 3, "text": "Option 3", "isHidden": 0 }]};

现在，我可以使用以下内容呈现包含所有项目的下拉列表：

<select ng-model="control.uiSelValue" ng-options="option.text for option in control.options" class="form-control"></select>

我怎样才能只渲染那些标记为“isHidden = 0”的元素？即我只想在下拉菜单中渲染“选项 1”和“选项 3”。

Answer 1

对control.options 应用自定义过滤器。您确实不需要创建此过滤器，因为您可以使用表达式，但我认为在视图中创建过多逻辑是一种不好的做法。

例如：

Demo

查看

<select ng-model="control.uiSelValue"
        ng-options="option.text for option in control.options | filter:myFilter"
        class="form-control">
</select>

控制器

$scope.control = {
    options: [{
        "id": 1,
        "text": "Option 1",
        "isHidden": 0
    }, {
        "id": 2,
        "text": "Option 2",
        "isHidden": 1
    }, {
        "id": 3,
        "text": "Option 3",
        "isHidden": 0
    }]
};

$scope.myFilter = function (value) {
    return value.isHidden === 0;
};