0

我有一个使用 ng-ifs 显示不同数据的页面，我需要在同一页面上显示其中有多少是正确的。只是号码。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>

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

谢谢你。

4

1 回答 1

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>
于 2016-09-15T05:36:28.183 回答