Question

以下是我对下述代码的疑问 -

在页面加载时，我的下面的自定义排序过滤器被多次调用。为什么呢？
在选择选择选项（来自指令）时，我想根据所选值触发过滤器（使用双向绑定）。这里再次过滤被称为三次。为什么呢？

有人能指出我的答案吗？我知道Angular通过比较新旧摘要来做Dirty Check，但为什么要进行多次和第三次调用（如上面的问题所述）。

我有以下指令 -

angular.module("customDirectives", [])
.directive("sortAll", function () {
    return {
        restrict: "E",
        scope: {
            columns: "=sortcolumns",
            optionselected: "=selectedoption"
        },
        templateUrl: '../Views/Directives/SortAll.html',
        controller: function ($scope) {
            $scope.sortOptions = [];
            var asc = 'Ascending';
            var desc = 'Descending';
            $scope.getSortOptions = function () {
                angular.forEach($scope.columns, function (item) {
                    $scope.sortOptions.push({ name: item + '-' + asc, value: asc });
                    $scope.sortOptions.push({ name: item + '-' + desc, value: desc });
                });
                $scope.optionselected = $scope.sortOptions[1];
                return $scope.sortOptions;
            }
        }
    };
});

指令HTML -

<select name="sortOptions" id="sortOptions" class="form-control width-20percent pull-right" 
        ng-options="option.name for option in sortOptions"
        ng-init="getSortOptions()"
        ng-model="optionselected"></select>

以下过滤器 -

angular.module("customFilters", [])
.filter("sort", function ($filter) {
    return function (data, sortOption) {
        console.log(sortOption);
        if (angular.isArray(data) && angular.isObject(sortOption)) {
            var options = sortOption["name"].split('-');
            var xc = options[1] == 'Ascending' ? false : true;
            return $filter("orderBy")(data, options[0], xc);
        } else {
            return [];
        }
    }
});

现在我的控制器代码 -

angular.module("productStore")
.controller("ProductListCtrl", function ($scope, $filter) {
});

提供数据的主控制器 -

angular.module("productStore")
.constant("dataUrl", "http://localhost:57398/testdata/Products.json")
.constant("productColumns", ["name","price","description"])
.controller("MainCtrl", function ($scope, $http, dataUrl, productColumns) {
    $scope.data = {};
    $scope.productColumns = productColumns;

    $http.get(dataUrl)
    .success(function (products) {
        $scope.data.products = products;
    })
    .error(function (error) {
        $scope.data.error = error;
    })
});

HTML -

<body ng-controller="MainCtrl">
    <div class="navbar navbar-inverse">
        <a class="navbar-brand" href="#">PRODUCT STORE</a>
    </div>

    <div class="panel-default" ng-controller="ProductListCtrl" ng-hide="data.error" ng-cloak>
        <div class="col-xs-8">
            <sort-All sortcolumns="productColumns" selectedoption="selectedSortOption"></sort-All>
            <div class="well padding-top-0px" ng-repeat="product in data.products | sort:selectedSortOption">
                <h3>
                    <strong>{{product.name}}</strong>
                    <span class="pull-right label label-primary">
                        {{product.price | currency}}
                    </span>
                </h3>
                <span class="lead">{{product.description}}</span>
            </div>
        </div>
    </div>
</body>

示例数据 -

  [{
    "category": "Watersports",
    "description": "A boat for one person",
    "name": "Kayak",
    "price": 275,
    "id": "05af70919155f8fc"
  }]

在页面加载 -

在选择 -

AngularJS自定义过滤器通过一次更改多次调用

0 个答案: