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

Question 1

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

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ę!

Question 2

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

Question 3

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'"

Question 4

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.

Question 5

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

Question 6

Te `ng-model`i `ng-checked`dyrektywy 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 };

Question 7

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.

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

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

ngChecked

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

Tryb EDYCJI: Model z bazy danych

Te `ng-model`i `ng-checked`dyrektywy nie powinny być używane razem