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

80

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!

angularjs angularjs-ng-model angularjs-ng-checked Abilash
fuente

Respuestas:

122

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

Langdon
fuente
ng-checkedse calcula como verdadero mediante una expresión. Para indicar ng-modelque no está vinculado, usé verdadero allí. Al iniciar el controlador, quiero que todas las casillas de verificación estén desmarcadas. Después de una solicitud ajax, calculo ng-checkedpara marcar la casilla de verificación. Esto es cuando mi ng-modelno está actualizado.
Abilash
5
@Abilash No deberías estar usando ngChecked. Su modelo está bien, solo necesita configurar testModel.item1 = truesu devolución de llamada ajax y luego llamar $scope.$apply()para actualizar su vista.
Langdon
2
Simplemente cometimos el error de usar ng-checkeden lugar de ng-model... ¡nunca más!
g00glen00b
Según la nota en docs.angularjs.org/api/ng/directive/ngChecked "Tenga en cuenta que esta directiva (ngChecked) no debe usarse junto con ngModel, ya que esto puede conducir a un comportamiento inesperado".
Abhijeet
@Langdon estuve atascado en este problema durante aproximadamente horas ... su sugerencia $ scope. $ Apply () resolvió mi problema. Gracias un montón.
Puntero nulo
13

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'"
JRT
fuente
Gracias, esta fue la solución para mí.
Jesper1
1

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í.

Scott
fuente
1

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

Naveen Kumar
fuente
Hay solo unos pocos usos apropiados de ngInit. Se puede abusar de esta directiva para agregar cantidades innecesarias de lógica a sus plantillas. Consulte la referencia de la API de la directiva AngularJS ng-init .
georgeawg
0

Las directivas ng-modely ng-checkedno 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 };
Georgeawg
fuente
0

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.

Antonio Ooi
fuente