Question

我是棱角分明的新人，而且我正在依赖A.Freeman的书＃14; Pro Angular JS＆＃34;。所以我陷入了一个试图理解为什么触发ng-repeat中的过滤器的例子。这是代码：

<body ng-controller="sportsStoreCtrl">
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">SPORTS STORE</a>
    </div>
    <div class="panel panel-default row" ng-controller="productListCtrl">
        <div class="col-xs-3">
            <a ng-click="selectCategory()" class="btn btn-block btn-default btn-lg">Home</a>
            <a ng-repeat="item in data.products | orderBy:'category' | unique:'category'" ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg">
         {{item}}
         </a>
        </div>
        <div class="col-xs-8">
            <div class="well" ng-repeat="item in data.products | filter:categoryFilterFn">
                <h3>
                    <strong>{{item.name}}</strong>
                    <span class="pull-right label label-primary">
         {{item.price | currency}}
         </span>
                </h3>
                <span class="lead">{{item.description}}</span>
            </div>
        </div>
    </div>
</body>

和

angular.module("sportsStore")
    .controller("productListCtrl", function ($scope, $filter) {
        var selectedCategory = null;
        $scope.selectCategory = function (newCategory) {
            selectedCategory = newCategory;
        }
        $scope.categoryFilterFn = function (product) {
            return selectedCategory == null ||
                product.category == selectedCategory;
        }
    });

categoryFilterFn让我感到困惑。当我按下selectCategory()上的ng-click方法时，为什么要调用catefory按钮，因为我从未明确地调用categoryFilterFn？

Answer 1

回答你的问题 - 因为$ digest。您没有直接调用categoryFilterFn。您的selectedCategory已更改，在categoryFilterFn中使用，categoryFilterFn绑定到范围。

Answer 2

我不确定如何正确描述它，但在此我的解释。

有两个“独立”部分：

重复迭代一系列项目。
如果通过ng-click功能选择类别，则在范围中设置新类别。

在这里踢过滤器功能，把它绑起来。它被触发是因为选择了一个新类别（$ digest）并“重新排序”该数组（如普通Javascript中的map函数），而angular magic（ng-repeat）仅显示具有此类别的项目。

这就是为什么我非常喜欢棱角分明的原因

角。为什么过滤器会自动调用？

2 个答案: