計算ng-if在angularjs中的真實語句？

我有一個頁面顯示不同的數據與ng-ifs，我需要顯示它們在同一頁面上有多少是真實的。只是數字。 HTML很複雜，但我已經制作了一個更簡單的版本來了解事情的工作原理。這裏是HTML的樣子，並且數據也在頁面上被操縱，所以ng-if值可以在它被渲染之後改變，因此頁面上的計數應該隨着它改變。計算ng-if在angularjs中的真實語句？

<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

謝謝。

來源

2016-09-15 Aijaz

寫一個JS函數來計算它？ –

我認爲你可以使用數組而不是變量..這樣你可以很容易地獲得計數 –

你可以添加一個新的ngIf指令。有關詳細信息，請參閱http://stackoverflow.com/a/18425418/3892935 – Kaspars

純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-15 05:36:28

計算ng-if在angularjs中的真實語句？

回答

相關問題