javascript - change - ng checked angular 4
AngularJS: ng-modelo no vinculante para ng-marcado para casillas de verificación (4)
Me referí a esto antes de hacer esta pregunta.
AngularJs no se une a ng-checked con ng-model
Si ng-checked
se evalúa como true
en el lado html
, ng-model
no se actualiza. No puedo ng-repeat
como se sugirió en la pregunta anterior porque tengo que usar un poco de estilo 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 simplemente haga clic en el botón Submit
. Por favor, no marque ninguna casilla de verificación.
¡Gracias por adelantado!
Lo que podría hacer es usar ng-repeat
pasando el valor de lo que está iterando a ng-checked
y desde allí utilizando ng-class
para aplicar sus estilos dependiendo del resultado.
Hice algo similar recientemente y funcionó para mí.
Puede declarar como in ng-init también se está volviendo 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 usted puede seleccionar el primero y el objeto También se muestra aquí verdadero, falso, flase
Puede usar ng-value-true para indicar a angular que su ng-model es una cadena.
Solo podría obtener un valor de ng-true-value si agregué las cotizaciones adicionales como tal (como se muestra en los documentos oficiales de Angular - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D )
ng-true-value="''1''"
ngModel
y ngChecked
no están diseñados para usarse juntos.
ngChecked
está esperando una expresión, por lo que al decir ng-checked="true"
, básicamente estás diciendo que la casilla de verificación siempre estará marcada por defecto.
Debería poder usar ngModel
, vinculado a una propiedad booleana en su modelo. Si quieres algo más, entonces necesitas usar ngTrueValue
y ngFalseValue
(que solo admiten cadenas en este momento) o escribir tu propia directiva.
¿Qué es exactamente lo que estás tratando de hacer? Si solo desea que se item1: true,
la primera casilla de verificación de manera 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 volcar {{testModel}}
en su HTML (o <pre>{{testModel|json}}</pre>
) Además, los atributos de ngModel
se pueden simplificar a ng-model="testModel.item1"
.