AngularJS: ng-model no se vincula a ng-checkboxes

Question 1

Me referí a esto antes de hacer esta pregunta.

AngularJs no enlaza ng-comprobado con ng-model

Si ng-checkedse evalúa a trueen el htmllado, el ng-modelno se actualiza. No puedo ng-repeatcomo se sugiere en la pregunta anterior porque tengo que usar algunos estilos para cada casilla de verificación.

Aquí está el plunker que he creado para ilustrar mi problema.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

Para ver lo que quiero, abra la consola y haga clic en el Submitbotón. No marques ninguna casilla de verificación.

¡Gracias por adelantado!

Question 2

ngModely ngCheckedno están destinados a utilizarse juntos.

ngCheckedestá esperando una expresión, por lo que al decir ng-checked="true", básicamente está diciendo que la casilla de verificación siempre estará marcada de forma predeterminada.

Debería poder usar ngModel, vinculado a una propiedad booleana en su modelo. Si desea algo más, debe usar ngTrueValuey ngFalseValue(que solo admite cadenas en este momento) o escribir su propia directiva.

¿Qué es exactamente lo que estás intentando hacer? Si solo desea que la primera casilla de verificación esté marcada de forma predeterminada, debe cambiar su modelo - item1: true,.

Editar: no tiene que enviar su formulario para depurar el estado actual del modelo, por cierto, puede simplemente volcarlo {{testModel}}en su HTML (o <pre>{{testModel|json}}</pre>). También sus ngModelatributos se pueden simplificar a ng-model="testModel.item1".

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

Question 3

Puede usar ng-value-true para decirle a angular que su ng-model es una cadena.

Solo podría hacer que ng-true-value funcione si agregué las comillas adicionales así (como se muestra en los documentos oficiales de Angular: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D )

ng-true-value="'1'"

Question 4

Lo que podría hacer es ng-repeatpasar el valor de lo que sea que esté iterando ng-checkedy desde allí utilizar ng-classpara aplicar sus estilos según el resultado.

Hice algo similar recientemente y funcionó para mí.

Question 5

Puede declarar como el ng-init también se vuelve cierto

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

Y puede seleccionar el primero y el objeto también se muestra aquí verdadero, falso, flase

Question 6

Las directivas `ng-model`y `ng-checked`no deben usarse juntas

De los Docs:

ngChecked

Establece el atributo marcado en el elemento, si la expresión en el interior ngCheckedes veraz.

Tenga en cuenta que esta directiva no debe utilizarse junto conngModel , ya que esto puede provocar un comportamiento inesperado.

- Referencia de API de directiva de AngularJS ng-comprobada

En su lugar, establezca el valor inicial deseado desde el controlador:

<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

No necesita ng-checkedcuando lo usa ng-model. Si está realizando CRUD en su formulario HTML, simplemente cree un modelo para el CREATEmodo que sea coherente con su EDITmodo durante el enlace de datos:

Modo CREAR: modelo solo con valores predeterminados

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

Modo EDITAR: modelo de la base de datos

$scope.dataModel = getFromDatabaseWithSameStructure()

Entonces, ya EDITsea en CREATEmodo o , puede utilizar constantemente su ng-modelpara sincronizar con su base de datos.

AngularJS: ng-model no se vincula a ng-checkboxes

Las directivas ng-modely ng-checkedno deben usarse juntas

ngChecked

Modo CREAR: modelo solo con valores predeterminados

Modo EDITAR: modelo de la base de datos

Las directivas `ng-model`y `ng-checked`no deben usarse juntas