javascript - 显示/隐藏 SELECT 选项？

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>

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

有什么办法吗？

---

正如 Yatrix 所解释的那样，我使用过滤器完成了它，另外我将组件的 Controller 作为参数传递。这样我就可以访问触发器变量，以决定要过滤的内容。

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

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