Warum funktioniert `ng-checked` nicht mit` ng-change`?

Question

Ich habe eine Liste von Kontrollkästchen. Immer wenn ich auf ein Kontrollkästchen klicke, möchte ich eine Funktion aufrufen, je nachdem, ob sie aktiviert oder deaktiviert ist. Dies wird erreicht mit ng-change

Gleichzeitig habe ich auch ng-checked, die mir hilft, ein Kontrollkästchen mit einem Knopf zu deaktivieren.

Im Anschluss an die Umsetzung:

<md-checkbox md-no-ink="true" ng-checked="selected.indexOf(brand) > -1" ng-change="value?add(brand):remove(brand)" ng-model="value" ng-repeat="brand in brands"> 
      {{brand}} 
</md-checkbox> 

<md-button ng-click="fun('Spice')">Uncheck</md-button> 

Der Controller-Code wird wie folgt dar:

$scope.brands = ['Apple','Samsung','Motorolla','Nokia','Micromax','Spice']; 
    $scope.value = false; 
    $scope.selected = []; 

    $scope.fun = function(x){ 
     console.log("Unchecking "+x); 
    } 
    $scope.add = function(x){ 
     $scope.selected.push(x); 
    } 
    $scope.remove = function(x){ 
     var index = $scope.selected.indexOf(x); 
     $scope.selected.splice(index,1); 
    } 

Es gibt eine ähnliche Frage auf Stackovrflow ist, aber es hatte Frage in Bezug auf ng-Modell auf das Kontrollkästchen fehlt . Ich habe ng-model hier aufgenommen.

Warum funktioniert das nicht? Habe ich etwas falsch gemacht?

Answer 1

Die official documentation besagt, dass

Beachten Sie, dass diese Richtlinie nicht zusammen verwendet werden soll, mit ngModel, wie dies zu unerwartetem Verhalten führen kann.

Sie sollten entscheiden, ob Sie die ng-model oder verwenden möchten. Leider ist es derzeit nicht möglich, ng-checked auf die md-checkbox Richtlinie (see this bug) zu verwenden. Sie müssen also die ng-model verwenden. Der folgende Code sollte Ihnen helfen.

HTML

<md-checkbox md-no-ink="true" ng-model="selected[$index]" ng-repeat="brand in brands track by $index"> 
    {{brand}} 
</md-checkbox> 

Is Samsung selected: {{isSelected('Samsung')}} 

JS

$scope.brands = ['Apple','Samsung','Motorolla','Nokia','Micromax','Spice']; 
$scope.selected = []; 

$scope.isSelected = function(brand) { 
    var brandIndex = $scope.brands.indexOf(brand); 
    return $scope.selected[brandIndex] 
}; 

Bitte beachten Sie, dass jedes Kästchen ein eigenes Modell benötigt. Bevor Sie die $scope.value als einzelnes Modell für alle Kontrollkästchen verwendet haben, wurden sie in diesem Fall alle gleichzeitig aktiviert/deaktiviert.

Ich glaube, der Code oben ist, was Sie suchen. Fühlen Sie sich frei, einen Kommentar abzugeben, wenn ich den Punkt verpasst habe.