Question

假设我有以下内容：

  <select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts"></select>

现在我想要的是通过单击组按钮来隐藏/显示每个GROUP，即每个组都有按钮，当我切换 - 点击它时，我希望指定的组选项隐藏/显示在选择中 - 框。

有什么办法吗？

我使用过滤器做了Yatrix解释，并且我将组件的控制器作为参数传递。通过这种方式，我可以访问触发变量，以确定要过滤的内容。

我现在唯一的问题是我正在使用：

ctrl.form.select_box = ctrl.opts[0].id

我不能再使用它来设置默认选项!!任何解决方法。

这就是我最终的结果：

  <select class="form-control" name="blah" ng-model="$ctrl.form.blah" ng-options="item.id as item.name group by item.etype | uppercase for item in $ctrl.opts | blah:$ctrl"></select>

angular.module('myapp').filter('blah', function() {
return function(items, ctrl) {
    rv = [];
    angular.forEach(items, function(item) {
        if (ctrl.blah_f1 && item.etype == 'type1') rv.push(item);
        if (ctrl.blah_f2 && item.etype == 'type2') rv.push(item);
    });
    return rv;
};
});

我知道直接访问ctrl不是一个好主意，但是没有看到任何其他方式干净地影响过滤器。标志由两个按钮触发，这两个按钮的行为类似于收音机和复选框，即至少一个按钮必须打开，但两个按钮都可以打开。这样，用户可以决定选择框中的哪种“类型”项目。

Answer 1

您可以使用自定义过滤器。这将在前端过滤这些项目。当您将其切换回来时，它将被添加到列表中。

   .filter('myFilter', function () {
      // items = your options
      return function (items) {
        var filtered = [];

        for (var i = 0; i < items.length; i++) {
          var item = items[i];

          // add a property to your model to track what's been removed
          if (!item.removed) {
            filtered.push(item);
          }
        }

        // return all the times that haven't been removed
        return filtered;
      };
    });

显示/隐藏SELECT选项？

1 个答案: