Question

我创建了一个控制器，使用li在ng-repeat中显示数据。

数据有一个名为filter的变量，用于对数据进行分类。现在我想基于此变量过滤li，并希望通过使用按钮来完成。

但我不知道如何将过滤器连接到控制器中的数据。我为它创建了plunkr：plunkr

Answer 1

有一个名为“filter”的内置过滤器，它适用于此
将filter更新为对象currentFilter，并将currentFilter.filter默认为“app”，告知过滤器对要过滤的对象上的哪个属性进行过滤。
添加了按钮并将它们绑定到设置currentFilter.filter点击范围的范围内的函数
更新了ng-repeat以使用'currentFilter'并将strict设置为true，因此它与单词完全匹配。默认情况下，strict为false，就像谓词一样。

angular docs：https://docs.angularjs.org/api/ng/filter/filter#example

var app = angular.module('plunker', []);

app
  .controller('isotopeCtrl', isotopeFunction);

function isotopeFunction($scope) {
    $scope.names = ['website-1', 'website-2', 'app-1', 'psd-1', 'psd-2', 'psd-3'];
    $scope.currentFilter = {
      filter: 'app'
    };
    $scope.data = [{
            name: 'website-1',
            filter: 'website'
        },
        {
            name: 'website-2',
            filter: 'website'
        },
        {
            name: 'app-1',
            filter: 'app'
        }
    ];
    $scope.setFilter = function(filter) {
        $scope.currentFilter.filter = filter;
    };
    console.log($scope.names);
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="isotopeCtrl">
    <h2>Simple Data</h2>
    <ul>
        <li ng-repeat="item in data">
            <div>{{ item.name }}</div>
        </li>
    </ul>
    <h2>Using Filter</h2>
    
    <p>Here I used a dynamic filter - {{ currentFilter.filter }} )</p>
    <ul>
        <li ng-repeat="item in data | filter:currentFilter:true">
            <div>{{ item.name }}</div>
        </li>
    </ul>
    Filters
    <button ng-click="setFilter('app')">app</button>
    <button ng-click="setFilter('website')">website</button>
  </body>

</html>

自定义过滤器，用于控制器中的ng-repeat

1 个答案: