计算 ng-repeat 中的可见元素答案

【问题标题】：Counting visible elements in ng-repeat计算 ng-repeat 中的可见元素
【发布时间】：2016-12-29 17:28:57
【问题描述】：

我想知道在受到 ng-if 和 ng-show 约束后显示的可见元素的数量。这是一个简化的例子：

$scope.fruits = [
        { name: 'apple', shape: 'round', color: 'red' },
        { name: 'stop sign', shape: 'pointy', color: 'red' },
        { name: 'orange', shape: 'round', color: 'orange' },
        { name: 'tomato', shape: 'round', color: 'red'}
    ];




    <ul>
       <li ng-repeat="fruit in fruits" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
    </ul>

有没有办法计算结果显示的项目数？

【问题讨论】：

你的意思是结果项的数量？？
是的。感谢您的关注，但我能够弄清楚:)

标签： angularjs angularjs-ng-repeat ng-show

【解决方案1】：

我最终没有使用 ng-if 或 ng-show，只是过滤了 ng-repeat。这样，我就不必隐藏任何内容，并且可以轻松获得结果的长度。

<ul>
   <li ng-repeat="fruit in fruits | filter:myFilter | filter:{shape:'round'} as filteredFruits">{{fruit.name}}</li>
   {{filteredFruits.length}} fruits
</ul>

$scope.myFilter = function(x) {
    if (x.color == 'red') {
        return x;
    }
}

【讨论】：

【解决方案2】：

您可以计算项目的数量，

$scope.fruits = [
            { name: 'apple', shape: 'round', color: 'red' },
            { name: 'stop sign', shape: 'pointy', color: 'red' },
            { name: 'orange', shape: 'round', color: 'orange' },
            { name: 'tomato', shape: 'round', color: 'red' }
        ];

        $scope.FindVisible = function () {
            var visibleObject=0;
            $scope.fruits.forEach(function (v, k) {                
                if (v.shape == 'round' && v.color == 'red') {
                    visibleObject = visibleObject + 1;                    
                }
            });
            alert(visibleObject);
        }

<ul>
        <li ng-repeat="fruit in fruits" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
        <button ng-click="FindVisible()">Find</button>
</ul>

【讨论】：

【解决方案3】：

试试这个

<ul>
   <li ng-repeat="fruit in fruits | notEmpty as Items" ng-if="fruit.color=='red'" ng-show="fruit.shape=='round'">{{fruit.name}}</li>
</ul>

<p>Number of Items: {{Items.length}}</p>

【讨论】：

【解决方案4】：

有了这个，您可以删除您的自定义过滤器并使用 as 关键字来获取 li 长度。

var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
   $scope.fruits = [
        { name: 'apple', shape: 'round', color: 'red' },
        { name: 'stop sign', shape: 'pointy', color: 'red' },
        { name: 'orange', shape: 'round', color: 'orange' },
        { name: 'tomato', shape: 'round', color: 'red'}
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">

<ul>
        <li ng-repeat="fruit in fruits| filter:{'shape':'round', 'color':'red'}" >{{fruit.name}}</li>
</ul>

</div>

【讨论】：