在angularjs中计算ng-if true语句

Question

我有一个页面，其中显示不同的数据与ng-if，我需要显示其中有多少是真实的在同一页面上。就是这个数字。HTML是复杂的，但我做了一个更简单的版本来理解事情是如何工作的。下面是HTML的样子，数据也在页面上被操作，所以ng-if值在呈现之后可以改变，因此页面上的计数也应该随之改变。

<div ng-if="abc">
  some data 1 
</div>
<div ng-if="!abc">
  some data 2
</div>
<div ng-if="xyz">
  some data 3
</div>
<div ng-if="abc">
  some data 4
</div>
<div ng-if="!xyz">
  some data 5
</div>

我也做了一个计划。http://plnkr.co/edit/5wdiSLhbHpOPJGjRn47L?p=preview

谢谢。

Answer 1

一个纯JavaScript的解决方案可以是添加一个类(或属性)到具有ng-if条件的HTML元素，然后使用document.getElementsByClassName('class-name').length来获得具有ng-if条件为真元素的数量。

例子:

<div class="sample-class" ng-if="abc">
  some data 1 
</div>
<div class="sample-class" ng-if="!abc">
  some data 2
</div>
<div class="sample-class" ng-if="xyz">
  some data 3
</div>
<div class="sample-class" ng-if="abc">
  some data 4
</div>
<div class="sample-class" ng-if="!xyz">
  some data 5
</div>
<div>Total count is: {{getCount(); totalCount}}</div>
<script type="text/javascript">
    angular.module('app', [])
    .controller('ctrl', function($scope, $timeout) {
        $scope.totalCount = 0;
        $scope.getCount = function(){
            $timeout(function(){
                $scope.totalCount = document.getElementsByClassName('sample-class').length;
            });
        };  
    }); 
</script>