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 ソリューションは、条件を持つ HTML 要素にクラス (または属性) を追加し、ng-ifそれを使用して条件が真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 に答える