AngularJS: ng-model nie wiąże się z ng-zaznaczone dla pól wyboru

80

Odniosłem się do tego, zanim zadałem to pytanie.

AngularJs nie wiąże ng-check z ng-model

Jeśli ng-checkedjest oceniany jako truepo htmlstronie, ng-modelnie jest aktualizowany. Nie mogę, ng-repeatjak zasugerowano w powyższym pytaniu, ponieważ muszę użyć stylu dla każdego pola wyboru.

Oto plunker, który stworzyłem, aby zilustrować mój problem.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Aby zobaczyć, czego chcę, otwórz konsolę i po prostu kliknij Submitprzycisk. Nie zaznaczaj żadnych pól wyboru.

Z góry dziękuję!

angularjs angularjs-ng-model angularjs-ng-checked Abilash
źródło

Odpowiedzi:

122

ngModeli ngCheckednie są przeznaczone do wspólnego użytku.

ngCheckedoczekuje wyrażenia, więc mówiąc ng-checked="true", po prostu mówisz, że pole wyboru będzie zawsze domyślnie zaznaczone.

Powinieneś być w stanie po prostu użyć ngModel, powiązanego z właściwością logiczną w swoim modelu. Jeśli chcesz czegoś innego, musisz albo użyć ngTrueValuei ngFalseValue(które obecnie obsługują tylko łańcuchy), albo napisać własną dyrektywę.

Co dokładnie próbujesz zrobić? Jeśli chcesz, aby pierwsze pole wyboru było domyślnie zaznaczone, powinieneś zmienić model - item1: true,.

Edycja: nie musisz przesyłać formularza, aby debugować bieżący stan modelu, przy okazji, możesz po prostu wrzucić {{testModel}}do HTML (lub <pre>{{testModel|json}}</pre>). ngModelMożesz również uprościć swoje atrybuty ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

Langdon
źródło
ng-checkedjest obliczany na true przez wyrażenie. Aby wskazać ng-model, że nie jest powiązany, użyłem tam true. Podczas inicjowania kontrolera chcę, aby wszystkie pola wyboru były odznaczone. Po pewnym żądaniu Ajax obliczam, ng-checkedaby zaznaczyć pole wyboru. To jest, gdy mój ng-modelnie jest aktualizowany.
Abilash
5
@Abilash Nie powinieneś używać ngChecked. Twój model jest w porządku, wystarczy ustawić testModel.item1 = truewywołanie zwrotne w AJAX, a następnie zadzwonić, $scope.$apply()aby zaktualizować widok.
Langdon
2
Po prostu popełniliśmy błąd, używając ng-checkedzamiast ng-model... nigdy więcej!
g00glen00b
Zgodnie z uwagą na docs.angularjs.org/api/ng/directive/ngChecked „Zauważ, że ta dyrektywa (ngChecked) nie powinna być używana razem z ngModel, ponieważ może to prowadzić do nieoczekiwanego zachowania”.
Abhijeet
@Langdon Utknąłem w tym problemie przez około godziny ... Twoja wskazówka $ scope. $ Apply () rozwiązała mój problem. Wielkie dzięki.
Null Pointer
13

Możesz użyć ng-value-true, aby powiedzieć kątowi, że twój model ng jest ciągiem.

Mogę uzyskać działanie wartości ng-true-value tylko wtedy, gdy dodam dodatkowe cudzysłowy w ten sposób (jak pokazano w oficjalnej dokumentacji Angular - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D )

ng-true-value="'1'"
JRT
źródło
Dzięki, to była dla mnie poprawka!
Jesper 1
1

To, co możesz zrobić, to ng-repeatprzekazać wartość tego, co iterujesz, do, ng-checkeda stamtąd, wykorzystując ng-classswoje style w zależności od wyniku.

Zrobiłem ostatnio coś podobnego i to zadziałało.

Scott
źródło
1

Can Declare As the in ng-init również staje się prawdą

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

I możesz wybrać pierwszy i obiekt również tutaj pokazany true, false, flase

Naveen Kumar
źródło
Jest tylko kilka odpowiednich zastosowań ngInit. Ta dyrektywa może być nadużywana, aby dodać niepotrzebną ilość logiki do szablonów. Zobacz Dokumentacja API dyrektywy AngularJS ng-init .
georgeawg
0

Te ng-modeli ng-checkeddyrektywy nie powinny być używane razem

Z Dokumentów:

ngChecked

Ustawia atrybut zaznaczony na elemencie, jeśli wyrażenie wewnątrz ngCheckedjest prawdziwe.

Należy pamiętać, że tej dyrektywy nie należy używać razem zngModel , ponieważ może to prowadzić do nieoczekiwanego zachowania.

- Dokumentacja API dyrektywy AngularJS ng-Check

Zamiast tego ustaw żądaną wartość początkową ze sterownika:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
georgeawg
źródło
0

Nie potrzebujesz, ng-checkedkiedy używasz ng-model. Jeśli wykonujesz CRUD na formularzu HTML, po prostu utwórz model dla CREATEtrybu, który jest spójny z twoim EDITtrybem podczas wiązania danych:

Tryb CREATE: Modeluj tylko z wartościami domyślnymi

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

Tryb EDYCJI: Model z bazy danych

$scope.dataModel = getFromDatabaseWithSameStructure()

Następnie, niezależnie od tego, EDITczy CREATEtryb, możesz konsekwentnie używać swojego ng-modeldo synchronizacji z bazą danych.

Antonio Ooi
źródło