获取 ng-repeat 的匹配 ng-if 的数量答案

【问题标题】：Get number of matching ng-if of a ng-repeat获取 ng-repeat 的匹配 ng-if 的数量
【发布时间】：2015-07-02 19:51:20
【问题描述】：

假设我有类似的东西：

<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">
         <md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
             <img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
         </md-button>
         <md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>

有没有办法检索显示的瓷砖数量？表示ng-repeat 中与ng-if 匹配的元素数量：

<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">

根据要求，search 函数：

    $scope.search = function (carto) {
    if ($scope.sideMenu) {
        var searchRegex = new RegExp('global', 'i');

        if (carto.fullDisplayName.search(searchRegex) != -1)
            return true;
    }
    else if ($scope.sideSearch) {
        if ($scope.searched.IS.indexOf(carto.informationSystem) === -1 && carto.informationSystem)
            return false;
        if ($scope.searched.area.indexOf(carto.area) === -1 && carto.area)
            return false;
        if ($scope.searched.block.indexOf(carto.block) === -1 && carto.block)
            return false;
        if ($scope.searched.type.indexOf(carto.type) === -1 && carto.type)
            return false;
        if ($scope.searched.level.indexOf(carto.level) === -1 && carto.level)
            return false;

        if ($scope.searchInput) {
            var searchRegex = new RegExp($scope.searchInput, 'i');

            if (carto.fullDisplayName.search(searchRegex) === -1)
                return false;
        }
        if (!$scope.homeVisible) {
            $scope.homeVisible = true;
            window.history.pushState("newUrl", "CartoViewer", window.location.origin + window.location.pathname);
        }
        return true;
    }
    else
        return true;
};

【问题讨论】：

在搜索功能中实现计数器。
显示的图块数只是cartoList.length。可以使用$index 找到每个迭代的索引
@RGraham :cartoList.length 是瓷砖的数量（总计：显示和隐藏，包括那些与我的ng-if 不匹配的瓷砖）@Rohit Kumar :Implementing a counter in my search` 功能，不适合我，因为它针对不同的过滤器经历了几个循环，并为相同的 carto 多次返回 true
@Ellone 你能提供来自控制器的search(carto) 代码吗？
@Ellone 我明白你现在的意思了。这似乎是一个奇怪的模式。如果您的商品不显示，为什么它们甚至在cartoList 中？似乎search() 应该发生在ng-repeat 之外，只留下你需要的物品，而不必ng-if 每个单独的物品

标签： javascript html angularjs angularjs-ng-repeat angular-ng-if

【解决方案1】：

就个人而言，我会过滤cartoList在你将它发送到视图：

$scope.cartoListFiltered = function() {
    return $scope.cartoList.filter($scope.search);
};

在你看来：

<md-grid-tile class="gray" ng-repeat="carto in cartoListFiltered()">
         <md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
             <img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
         </md-button>
         <md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>

这会针对每个人 carto 运行您的 $scope.search，并且仅包括返回 true 的 carto。与ng-if 相同，只是逻辑在控制器（应该在哪里）执行

【讨论】：

不确定我是否理解如何将此函数用作ng-repeat 的容器。我的搜索函数只接受cartoList 的一个元素作为参数，如果根据视图中可以修改的不同搜索参数匹配搜索，则返回true。
@Ellone filter 对cartoList 中的每个元素执行一次search - 与ng-if 所做的相同。唯一的区别是您将拥有一个 carto 数组，其中只有条件匹配
没有看到您的编辑，现在看起来还不错。那么显示（匹配）元素的数量是{{cartoListFiltered().length}} 对吗？