如何呈现AngularJs下拉仅可见项 [英] How to render only visible items in AngularJs Dropdown

问题描述

我有以下AngularJs对象：

I have following AngularJs object:

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

现在，我可以使用以下的所有项目下拉：

Now, I CAN render a dropdown with all items using following:

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

我怎么能只渲染其中被标记的元素是否隐藏= 0？即我想只渲染选项1，只有在下拉方案3。

How can I render only those elements which are marked "isHidden = 0"? i.e. I want to render only "Option 1" and "Option 3" only in Dropdown.

推荐答案

应用自定义的过滤器以 control.options 。你真的不需要创建此过滤器，因为你可以使用一个前pression，但我认为这是一个不好的做法，使太多的逻辑视图。

Apply a custom filter to control.options. You really don't need to create this filter since you can use an expression but I think it is a bad practice to make too much logic in the view.

例如：

演示

查看

<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;
};

这篇关于如何呈现AngularJs下拉仅可见项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！