Question

我想根据范围内的数组中是否出现div的特征（称为＆＃39; type＆＃39;）来过滤四个div。下面是一个更详细的解释和我尝试实现这一目标的三种方法：

我有四个按钮，当点击时应该切换四个不同的div，它们是ng-repeat的副产品

按钮：

 <div class="buttonDiv">
        <ul>
        <li ng-repeat="type in vm.reviewTypes">
          <span ng-click="vm.toggleTypes.indexOf(type) == - 1 ? vm.toggleTypes.push(type) : vm.toggleTypes.splice(vm.toggleTypes.indexOf(type), 1)" ng-class="{ 'activeCategoryButton' : vm.toggleTypes.indexOf(type) != -1}">{{type}}</span>
        </li>
      </ul>
    </div>

按钮是通过数组vm.reviewTypes构建的ng-repeat，其中包含[＆＃39; type1＆＃39;，＆＃39; type2＆＃39;，＆＃39; type3＆＃39;，＆＃39; TYPE4＆＃39;]

数组构建在名为vm.toggleTypes的范围内，该范围包含＆＃39;类型＆＃39;分配给当前活动按钮，也是我想要显示的div。

这是div（技术上很好的页脚）和ng-repeat（HTML之前我试过过滤器）：

    <footer ng-repeat="(kind, reviews) in vm.reviews" class="site-footers-container {{kind}}">
    <span>{{ kind }}</span>
 //MORE THINGS HERE............
  </footer>

我希望根据＆＃39;种类＆＃39;进行过滤。匹配数组vm.toggleTypes的元素，其内容基于哪些按钮处于活动状态。我尝试过以下方法：

（ATTEMPT 1）

      <footer ng-repeat="(kind, reviews) in vm.reviews | vm.toggleTypes.indexOf(kind) != -1" class="site-footers-container {{kind}}">
    <span>{{ kind }}</span>
 //MORE THINGS HERE............
  </footer>

上面提到我＆＃34;未知提供者：vmFilterProvider＆＃34;作为错误，reference

接下来我试过了：

（ATTEMPT 2）

          <footer ng-repeat="(kind, reviews) in vm.reviews | filter: vm.toggleTypes.indexOf(kind) != -1" class="site-footers-container {{kind}}">
    <span>{{ kind }}</span>
 //MORE THINGS HERE............
  </footer>

此处没有错误，但它只是不起作用。

我还尝试在范围内创建一个函数，它只返回true或false，具体取决于ng-repeat中的键＆＃39; kind＆＃39;是否匹配数组中的一个条目vm.toggleTypes ;然而，这给了我同样的错误＆＃39;未知的提供者：vmFilterProvider＆＃39;并且控制器中的功能是：

（ATTEMPT 3）

vm.matchClass = function (key) {
if (vm.toggleTypes.indexOf(value) != -1)
{return true;}
else {return false;}
};

我的HTML当时是：

          <footer ng-repeat="(kind, reviews) in vm.reviews | vm.matchClass(kind)" class="site-footers-container {{kind}}">
    <span>{{ kind }}</span>
 //MORE THINGS HERE............
  </footer>

提前抱歉，我是Angular的新手并且多次没有使用过滤器

Answer 1

我只是将原始列表拆分为控制器中的四个所需列表。这样，过滤只进行一次，而ng-repeat要快得多。

Answer 2

而不是尝试使用|过滤，使用ng-if评估当前的密钥是否为＆＃39;迭代的对象是在作用域的数组中：

<footer ng-repeat="(kind, reviews) in vm.reviews" ng-if="vm.toggleTypes.indexOf(kind) != -1" class="site-footers-container {{kind}}">
<span>{{ kind }}</span>
//MORE THINGS HERE............
 </footer>

完美运作

Answer 3

根据Angular's documentation，当使用ng repeat迭代对象时，不能使用内置过滤器'filter'和'orderBy'。

在ng-repeat中过滤对象：对作用域中数组中的项的键（不是值）

3 个答案: