タイムアウトのないアクティブなクラスの長さを取得できません

クリックに基づいてアクティブなクラスの長さを取得しようとしています。私はタイムアウトを使用している場合は、正確なカウントを取得しています。正確なアクティブなクラスの長さを取得するためにタイムアウトを使用せずにどのように達成できますか？タイムアウトのないアクティブなクラスの長さを取得できません

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t 
 
\t <style> 
 
\t \t a { 
 
\t \t \t text-decoration:none; 
 
\t \t } 
 
\t \t .active { 
 
\t \t \t color:orange; 
 
\t \t } 
 
\t </style> 
 
\t 
 
</head> 
 
<body ng-app="sample"> 
 

 
<div ng-controller="test"> 
 
<div data-ng-init="names=[{name:'XML'},{name:'Java'},{name:'Tutorial'}]"> 
 
     <ul> 
 
      <li data-ng-repeat="myObject in names"><a href="javascript:void(0);" ng-model="toggle" ng-class="toggle ? 'active' : ''" ng-click="toggle=!toggle; getActiveLength();">{{myObject.name}}</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 
<script type="text/javascript"> 
 
\t angular.module('sample',[]).controller('test', function($scope, $timeout){ 
 
\t \t $scope.getActiveLength = function() { 
 
\t \t \t $timeout(function(){ 
 
\t \t \t \t var total = angular.element(document.querySelectorAll(".active")).length; 
 
\t \t \t \t console.log("Length " + total); 
 
\t \t \t 
 
\t \t \t },500) 
 
\t \t } 
 

 
\t }) 
 
</script> 
 
</body> 
 
</html>

親切に、より良い解決策を掲載して示唆しています。

出典

2017-11-10 vadlamani

あなたはアンカータグをクリックしたときに起こる物事のカップルがあります：と呼ばれるgetActiveLength()

と呼ばれる

toggle値は

getActiveLength()を変更するには、toggleの値ものの角が$digestのプロセスが完了していないのでDOMに反映されません。だから、$scope.$$postDigestを使ってダイジェスト後のアクティブな要素をチェックする必要があります。あなたのソリューションのための

angular.module('sample',[]).controller('test', function($scope){ 
 
    $scope.getActiveLength = function(myObject) { 
 
    $scope.$$postDigest(function() { 
 
     var total = angular.element(document.querySelectorAll(".active")).length; 
 
     console.log("Length " + total); 
 
    }); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
<body ng-app="sample"> 
 
    <div ng-controller="test"> 
 
    <div data-ng-init="names=[{name:'XML'},{name:'Java'},{name:'Tutorial'}]"> 
 
     <ul> 
 
      <li data-ng-repeat="myObject in names"> 
 
      <a href="javascript:void(0);" ng-class="toggle ? 'active' : ''" ng-click="toggle=!toggle; getActiveLength();">{{myObject.name}} 
 
      </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-11-10 04:09:42 MrNobody

おかげで、申し訳ありませんが、そのangularJsバージョンで作業していません。私はバージョン1.6.1を使用したい – vadlamani

@vadlamani私は ' 1.6.1'となり、正常に動作しているようです。あなたのコードを分かち合い、あなたを助けてください！ – MrNobody

1.6.1では最初の選択要素をクリックしている間に長さが0になっています。一度確認してください。 – vadlamani

タイムアウトのないアクティブなクラスの長さを取得できません

答えて

関連する問題