2017-09-09 16 views
1

Ich versuche, die Anzahl der in einem Formular aktivierten/ausgewählten Kontakt-Kontrollkästchen zu zählen. Was könnte falsch sein mit dem folgenden Code-Snippet, das tatsächlich die doppelte Anzahl gibt.Die Anzahl der überprüften Kontrollkästchen in einem Formular zu ermitteln ergibt das Doppelte der tatsächlichen Anzahl.

HTML:

<div ng-hide ="onOff"> 
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}"> 
<label class="atl-check-box-label"> 
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()"> 
<span class="fntIcons appFtIcns"></span> 
</label> 
</span> 
</div> 
<div ng-hide ="!onOff"> 
<span class="ctCheckBox" ng-class="{'searchDataCheckbox':searchView}"> 
<label class="atl-check-box-label"> 
<input type="checkbox" class="atl-check-box" ng-checked="iscontactChecked(info.userId)" ng-click ="grpAct()"> 
<span class="fntIcons appFtIcns"></span> 
</label> 
</span> 
</div> 

Das HTML-Formular ist ein riesiger ein und es hat sowohl <span class="ctCheckBox" .. und <input type="checkbox" class="atl-check-box" .. auch in anderen Orten. In der Anwendungsansicht wird jedoch nur der obige HTML-Code angezeigt.

JS:

$scope.selectedContactsCount = angular.element('.ctCheckBox input:checked').length; 
alert('1st alert: ' +$('input:checkbox:checked').length); 
alert('2nd alert: ' +$('.atl-check-box input:checked').length); 

Alle oben genannten 3 JS Aussagen ergeben die falsche Anzahl der ausgewählten Kontrollkästchen:

  1. 1. gibt man die doppelte tatsächliche Kästchens Prüfanzahl
  2. Für 2., Zählung ist 27
  3. Für 3, Zählung ist 0

Beispiel: Wenn nur die 2 Kontakte ausgewählt werden, die in der Anwendungsansicht angezeigt werden, wird 4 als Anzahl der ausgewählten Kontakte angezeigt. Wenn 3 Kontakte ausgewählt sind, wird 6 als Anzahl der Kontakte angezeigt Anzahl der ausgewählten Kontakte und so weiter.

Fehle ich etwas?

Jede Hilfe wird sehr geschätzt, danke im Voraus!

+0

Dann haben Sie mehr Elemente mit dem Selektor als Sie denken. Das zweite Beispiel sollte nichts zurückgeben? – adeneo

+0

@adeneo, danke für die schnelle Antwort. Ich habe meine Frage bearbeitet, um zu erwähnen, dass das HTML-Formular diese Kontrollkästchen mit dem gleichen Bereich und die entsprechenden Kontrollkästchen-Klassennamen auch an anderen Stellen enthält, aber in der Anwendungsansicht werden nur diese vielen angezeigt. –

+0

Korrigiert die 2. JS-Anweisung in meiner obigen Abfrage. Wie finde ich mehr Elemente heraus, die mit dem Selektor übereinstimmen, und korrigiere die Zählung, um den richtigen Wert anzuzeigen? –

Antwort

0

Ich habe die Lösung für mein Problem gefunden. Der wahre Grund, warum die Zahl verdoppelt wurde immer war aufgrund der Verwendung von ng-hide, statt ng-if, die die ausgewählten Kontakte in dem DOM trotz wurde ein- oder ausgeblendet und was zu angular.element('.ctCheckBox input:checked').length finden 2 Vorkommen (ein Duplikat) der zeigen würde, Gleiches Kontrollkästchen. ng-if hat dieses Problem jetzt behoben, da Checkboxen bedingt auf DOM gerendert werden, jedoch gibt es einige andere Änderungen im anfänglichen Laden der Liste des Kontaktverhaltens der Anwendung, das untersucht wird.

Verwandte Themen