如何在AngularJs下拉列表中仅呈现可见项目

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”的元素？，即我只想在Dropdown中渲染“选项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;
};