Angular ng-if nie odpowiada zgodnie z oczekiwaniami - javascript, html, angularjs, checkbox

mam li elementy, które mają ng-if instrukcja powiązana z polem wyboru. Jeśli fizycznie zaznaczę pole wyboru, ng-if odpowiada zgodnie z oczekiwaniami. Jeśli jednak zaznaczę lub odznaczę pole wyboru za pomocą JavaScript, pola wyboru zostaną zaznaczone lub odznaczone zgodnie z oczekiwaniami, ale ng-if nie reaguje. Czy to działa tak, jak powinno? Czy jest na to lepszy sposób?

Oto mój przykładowy kod: „[]” = „<>”

HTML - część 1

[li id ​​= "homebutton" ng-if = "homechecked! = true" onclick = "homeclicked ()"] [a ng-href = "/"] [img src = "/ images / imagesNeck01Home.png" alt = " Strona główna "/] [/ a]

[li id ​​= "thebandbutton" ng-if = "homechecked === true" onclick = "thebandclicked ()"] [a ng-href = "/ theband /"] [img src = "/ images / imagesNeck01TheBand.png" alt = „The Band” /] [/ a]

HTML - część 2

[label class = "menucontroller"] Home2: [input class = "menucontroller" id = "homecb" type = "checkbox" ng-model = "homechecked" ng-init = "homechecked = true" /] [/ label] [ br /]

[label class = "menucontroller"] TheBand2: [input class = "menucontroller" id = "bandcb" type = "checkbox" ng-model = "thebandchecked" /] [/ labe] [

[label class = "menucontroller"] Gallery2: [input class = "menucontroller" id = "gallerycb" type = "checkbox" ng-model = "gallerychecked" /] [/ label] [br /]

JavaScript:

window.onload = function () {
}

function homeclicked() {
document.getElementById("homecb").checked = true;
document.getElementById("bandcb").checked = false;
document.getElementById("gallerycb").checked = false;
}

function thebandclicked() {
document.getElementById("homecb").checked = false;
document.getElementById("bandcb").checked = true;
document.getElementById("gallerycb").checked = false;
}

function galleryclicked() {
document.getElementById("homecb").checked = false;
document.getElementById("bandcb").checked = false;
document.getElementById("gallerycb").checked = true
}

Odpowiedzi:

1 dla odpowiedzi № 1

robisz to źle, ng-if nie uruchamia się, ponieważ manipulujesz tylkozaznaczone i odznaczone pole wyboru (używając javascript), a nie modelu ng, nie próbuj używać javascript, aby to zrobić, zamiast tego zrób to na kontrolerze kątowym.

Kontroler:

$scope.homeclicked = function() {
$scope.homechecked = true;
$scope.thebandchecked = false;
$scope.gallerychecked = false;
};

Model ng na wejściach pola wyboru obsługuje zaznaczone i niezaznaczone, istnieje również natywna dyrektywa https://docs.angularjs.org/api/ng/directive/ngChecked do obsługi czeku i odznacz.

---

0 dla odpowiedzi nr 2

Zrób to we właściwy sposób kątowy.

Przenieś funkcje wewnątrz kontrolera. Zadzwoń do nich przez ng-click. Pozwól funkcjom zmieniać zmienne zakresu, które są powiązane z polami wyboru.

<li id="homebutton" ng-if="homechecked != true" ng-click="homeclicked()">

Tymczasem w twoim zasięgu ...

$scope.homeclicked = function  {
$scope.homechecked = true;
$scope.thebandchecked = false;
$scope.gallerychecked = false;
}

---

Jeśli naprawdę chcesz zignorować moją radęi kontynuuj z tym, co masz, co jest bardzo złe, możesz dodać ten wiersz do swoich funkcji: angular.element (document.getElementById ("homecb")). $ scope (). $ apply (); To znowu jest bardzo złe i należy go całkowicie unikać.

---

-1 dla odpowiedzi nr 3

Posługiwać się

 $scope.$apply();

Uruchomi pętlę podsumowania, a twój ng-if będzie działał zgodnie z oczekiwaniami.

---