1

¿Alguien me podría ayudar? Tengo esto:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>

<body ng-app="checkboxExample">
  <script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value : ''
     };
    }]);
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Valor
    <input type="checkbox" ng-model="checkboxModel.value"
           ng-true-value="'Esta activo'" ng-false-value="''">
   </label><br/>
  <input type="text" ng-disabled="checkboxModel.value" value="{{checkboxModel.value}}">
 </form>
</body>
</html>

Y se puede probar en:

https://plnkr.co/edit/uCF1CxsU7SQzN9KzUAfe?p=preview

Mi pregunta es:

¿Como puedo hacer que cuando desactive el checkbox para escribir, venga y escriba cualquier cosa, cuando vaya a reactivar el checkbox de nuevo sobreescriba lo que esta y se vuelva a poner "Esta activo"? Osea borrar el texto y volverle a poner el valor.

Es exactamente esto https://bootsnipp.com/snippets/featured/beautify-checkboxes-amp-radio-input-group-addons#comments solo que al estar desactivado no habra nada en el input ¿como lo llevo a AngularJS (Angular 1)?

Algo parecido o de otra forma. Gracias al que pueda ayudar.

3
  • 2
    Danny, bienvenido a SOes. El sitio tiene herramientas de edición para que puedas escribir tu código bastante legible, ya que para algunos es difícil ir a otros sitios, te recomiendo ver este enlace es.stackoverflow.com/help/mcve. Tambien te recomiendo hacer el tour del sitio para saber como funciona mejor es.stackoverflow.com/tour y de paso ganar tu primera medalla. Al hacer esto y ponerlo en practica de seguro obtendras una buena respuesta a tu pregunta. el 3 jul. 2017 a las 17:03
  • Además, ¿podrías intentar explicar con detalle y no todo abreviado sin un solo signo de puntuación como si fuese el último mensaje antes de salir corriendo o incluso un tweet donde se cuentan los caracteres porque podrás ver que las preguntas en el sitio tienen formato y se puede dar espacio entre párrafos cosa que no veo ni un poco de consideración poniéndote en el lugar de otro que no sabe qué estás preguntando y le vendría bien una aclaración de tu objetivo qué intentaste y qué deseas obtener haciendo la pregunta y mostrando las partes relevantes de tu código? Gracias
    – Mariano
    el 3 jul. 2017 a las 17:12
  • Ya... si, escribí todo a la carrera el 3 jul. 2017 a las 17:33

1 respuesta 1

1

Puedes hacer lo siguiente (es tu mismo código, solo que lo ordene un poco y le agregue un par de lineas, que es mi respuesta):

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-checkbox-input-directive-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value : ''
     };
     $scope.valor = "";
     $scope.verificar = function(){
      if($scope.checkboxModel.value=="")
        $scope.valor = "Esta activo";
      else
        $scope.valor = "";
    }

    }]);
</script>

</head>
<body ng-app="checkboxExample">
<form name="myForm" ng-controller="ExampleController">
  <label>Valor
    <input type="checkbox"  ng-model="checkboxModel.value" ng-change="verificar()" 
    ng-true-value="'Esta activo'" ng-false-value="''">
   </label><br/>
  <input type="text" ng-disabled="checkboxModel.value"  ng-model="valor">
 </form>
</body>
</html>

Solo agregue una pequeña función en el controlador que se ejecuta al cambiar el estado del checkbox. Esta función verifica que si el valor es vacio, significa que viene de un estado desactivado y por lo tanto le escribe al modelo "valor" el texto que tu quieres para que aparezca al usuario, que en este caso es "Esta activo". Este modelo "valor" esta enlazado al input text que tienes para que se sobre escriba cualquier cosa.

P.D. No se muy bien que es lo que no estaba funcionando en tu primer código, pero creo que por el doble enlazado que maneja Angular, el checkboxModel.value se estaba sobreescribiendo después del cambio en el checkbox y por eso la expresión siempre mostraba lo que escribias y no lo que le estabas asignando en tu código. Saludos!

2
  • ¡Gracias! Soy nuevo usando angular y tampoco llevo mucho programando, así que me cuesta algo, me pusieron a hacer unas tareas para practicar y pues esta fue una. el 3 jul. 2017 a las 19:18
  • De nada. Ven por aqui cuando tengas mas preguntas concretas y reales para que puedas seguir aportando a la comunidad. Recuerda siempre seguir las disposiciones que tenemos aqui para preguntar. Saludos! el 3 jul. 2017 a las 20:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.