Angularjs Bereichsvariable wird nicht wie erwartet aktualisiert

Hier ist die Plunker Vorschau auf das Problem.Angularjs Bereichsvariable wird nicht wie erwartet aktualisiert

Index.HTML

<body ng-controller="MainCtrl"> 

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll('allSelected')" ng-checked="allChecked"> <br> <br> 

Slave1 : <input type="checkbox" id="slave1" ng-click="checkAll('slave1')" ng-checked="selectedAll" > <br> 
Slave2 : <input type="checkbox" id="slave2" ng-click="checkAll('slave2')" ng-checked="selectedAll" > <br> 
Slave3 : <input type="checkbox" id="slave3" ng-click="checkAll('slave3')" ng-checked="selectedAll" > <br> 
Slave4 : <input type="checkbox" id="slave4" ng-click="checkAll('slave4')" ng-checked="selectedAll" > <br> 
Slave5 : <input type="checkbox" id="slave5" ng-click="checkAll('slave5')" ng-checked="selectedAll" > <br>

app.js

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.checkAll = function(id) { 

    // First Condition 
    if (id === "allSelected" && document.getElementById(id).checked) { 
    // $scope.selectedAll = false; 
     $scope.allChecked = true; 
     $scope.selectedAll = true; 
    } 

    // Second Condition 
    if (id === "allSelected" && !document.getElementById(id).checked) { 
     $scope.allChecked = false; 
     $scope.selectedAll = false; 
    } 

    // Third Condition 
    if (id !== "allSelected" && !document.getElementById(id).checked) { 
     $scope.allChecked = false; 

    } 


    }; 
});

Siehe zuerst Zustand. Es funktioniert nicht wie erwartet.

Ich lade hier Bilder hoch, um das Problem besser zu verstehen.

Kasse die Differenz zwischen dem ersten Bild und dem zweiten Bild. Nach dem Deaktivieren des Kontrollkästchens "Slave" wird das Kontrollkästchen "Master" deaktiviert, aber direkt danach, wenn Sie erneut auf das Kontrollkästchen "Master" klicken (siehe das zweite Bild), ist das Kontrollkästchen "Salve" noch nicht markiert. Warum?

Was ich hier mache, ist falsch? Wie funktioniert dieser Code wie erwartet?

Quelle

2016-04-30 Abhi

Sie Verwenden Sie angularjs, warum überprüfen Sie es mit Element-ID, ist geprüft oder nicht. Sie können es mit $ SCOPE-Variablen tun, und 2-Wege-Bindung löst Ihre Probleme –

@ngDeveloper Ich habe es aber können Sie erarbeiten oder zeigen Sie mir ein Beispiel weil ich neu zu kantig bin. – Abhi

ok.in ein paar Minuten –

ich wieder schrieb Ihr Beispiel:

html:

<div ng-controller="MyCtrl"> 
    Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="masterCheckbox"> <br> <br> 

    <div ng-repeat="checkbox in checkBoxes"> 
     {{checkbox.name}} : <input type="checkbox" id="slave5" ng-click="check(checkbox)" ng-model="checkbox.value" /> <br/> 
    </div> 
</div>

js:

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.checkBoxes = [ 
     { name:'Slave1', value: false }, 
     { name:'Slave2', value: false }, 
     { name:'Slave3', value: false }, 
     { name:'Slave4', value: false }, 
     { name:'Slave5', value: false } 
    ]; 

    $scope.checkAll = function() { 
     angular.forEach($scope.checkBoxes, function(item){ 
      item.value = $scope.masterCheckbox; 
     }); 
    }; 

    $scope.check = function() { 
     var result = true; 
     angular.forEach($scope.checkBoxes, function(item){ 
      if(!item.value) result = false; 
     }); 
     $scope.masterCheckbox = result; 
    }; 
}

jsfiddle example

Quelle

2016-04-30 11:48:39 MaKCbIMKo

Das ist perfekt. – Abhi

<body ng-controller="MainCtrl"> 

Master Checkbox : <input type="checkbox" id="allSelected" ng-click="checkAll()" ng-model="allChecked"> <br> <br> 

Slave1 : <input type="checkbox" ng-model="checboxes['slave1']"> <br> 
Slave2 : <input type="checkbox" ng-model="checboxes['slave2']"> <br> 
Slave3 : <input type="checkbox" ng-model="checboxes['slave3']"> <br> 
Slave4 : <input type="checkbox" ng-model="checboxes['slave4']"> <br> 
Slave5 : <input type="checkbox" ng-model="checboxes['slave5']"> <br>

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.checkAll = function() { 
    if($scope.allChecked){ 
     for(var i in $scope.checkboxes){ 
     $scope.checkboxes[i] = true; 
     } 
    } 
    }; 
});

Quelle

2016-04-30 11:31:12

Sie den falschen Weg, um dies geht. In Winkeleingabewerte werden gespeichert/abgerufen mit ng-model, ich empfehle Ihnen, lesen Sie es entweder auf angular docs oder w3schools. Die Grundidee ist, dass, wenn Sie das ng-Modell einer Eingabe setzen, eckig selbst den Eingabewert verfolgt und diesen bei Änderung aktualisiert (so dass die ID auf der Checkbox nicht benötigt wird).

versuchen Sie Ihre Master-Checkbox Wechsel zu:

Master Checkbox : <input ng-change="selectAll(allSelected)" type="checkbox" ng-model="allSelected">

und die anderen Kontrollkästchen:

Slave 1: <input ng-change="unselect()" type="checkbox" ng-model="slave.selected"></br> 
/// etc.

Auch ich mag darauf hinweisen, dass, wenn Sie Kontrollkästchen (das Slave-Kontrollkästchen in Ihrem Beispiel wiederholen), normalerweise würden Sie sie nicht alle im HTML auflisten, würden Sie ein Array in Ihrem Controller dann nur ng-repeat erstellen, um alle Checkboxen auszugeben.Hier ist ein plunkr: http://plnkr.co/edit/w50WALj4Y0MtVVYX5TaV?p=preview

Quelle

2016-04-30 11:32:22

Angularjs Bereichsvariable wird nicht wie erwartet aktualisiert

Antwort

Verwandte Themen