Anzahl der untergeordneten Elemente in AngularJS

Ich ging durch viele Antworten zu finden, wie die Anzahl der Kind Elemente in Angular JS zählen, aber ich habe nicht verstanden. Bitte werfen Sie einen Blick auf meinen einfachen Code und schlagen Sie mir super einfach Methode des Zählens keine Kinder.Anzahl der untergeordneten Elemente in AngularJS

Ich möchte das gesamte Kind unter <div id="myDiv"> und insgesamt span Elemente unter <div id="myDiv"> zählen.

Hier insgesamt no of child = 5 und insgesamt span elements = 3

<html> 
    <body ng-app="myApp" ng-controller="myCtrl"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

     <button ng-click="countElem()">Count</button> 
     <div id="myDiv"> 
      <span>child 1</span> 
      <span>child 2</span> 
      <span>child 3</span> 
      <p>child 4</p> 
      <p>child 5</p> 
     </div> 

     <script> 
      var app = angular.module("myApp", []); 
       app.controller("myCtrl", function($scope){ 

      }); 
     </script> 
    </body> 
</html>

Quelle

2016-12-14 Rahul Sarkar

Sie können von querySelectorAll machen und Länge erhalten auf sie

Überprüfen Sie den folgenden Schnipsel

var app = angular.module("myApp", []); 
 
app.controller("myCtrl", function($scope) { 
 
    $scope.countElem = function() { 
 
    var div = document.querySelector('#myDiv'); 
 
    var spanCount = div.querySelectorAll('span').length; 
 
    var pCount = div.querySelectorAll('p').length; 
 
    console.log("spanCount" + spanCount); 
 

 
    console.log("pCount" + pCount); 
 
    } 
 
});

<html> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
    <button ng-click="countElem()">Count</button> 
 
    <div id="myDiv"> 
 
    <span>child 1</span> 
 
    <span>child 2</span> 
 
    <span>child 3</span> 
 
    <p>child 4</p> 
 
    <p>child 5</p> 
 
    </div> 
 

 
    <script> 
 
    </script> 
 
</body> 
 

 
</html>

Hope it

Quelle

2016-12-14 05:46:51 Geeky

Wow, super funktioniert. Danke vielmals. –

Your HTML like this... 

<div class="row"> 
    <div class="cols">col 1</div> 
    <div class="cols">col 2</div> 
    <div class="cols">col 3</div> 
</div> 
<div class="row"> 
    <div class="cols">col 1</div> 
    <div class="cols">col 2</div> 
</div>

hilft Ihnen, die unten Skript verwenden:

angular.forEach(document.querySelectorAll('.row'), function(val, key){ 
angular.element(val).removeClass('row'); 
angular.element(val).addClass('row'+angular.element(val).children().length); 
});

Quelle

2017-06-21 15:00:35

Anzahl der untergeordneten Elemente in AngularJS

Antwort

Verwandte Themen