Text of an input with a checkbox

Question

Text of an input with a checkbox

Navigation

#1 by (0 votes)

0

Good morning. Someone could help me? I have this:

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

And you can try it on:

link

My question is:

How can I make that when I deactivate the checkbox to write, come and write anything, when I go to reactivate the checkbox again, overwrite what is and put back "Is it active"? It is to erase the text and put the value back.

It's exactly this link only because it's disabled There will be nothing in the input how do I take it to angular?

Something similar or otherwise. Thanks to the one who can help.

javascript angularjs

asked by Danny Rodriguez 03.07.2017 в 18:59

source

1 answer

php version in Debian Stretch Android Question OnClick

score 0 · Accepted Answer

You can do the following (it's your code, just order it a bit and add a couple of lines, which is my answer):

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

Just add a small function to the controller that runs when you change the status of the checkbox. This function verifies that if the value is empty, it means that it comes from a deactivated state and therefore it writes to the "value" model the text that you want to appear to the user, which in this case is "This active". This "value" model is linked to the input text you have so that it is overwritten by anything.

P.D. I do not really know what was not working in your first code, but I think that because of the double bind that Angular handles, the checkboxModel.value was being overwritten after the change in the checkbox and that's why the expression always showed what you wrote and not what you were assigning in your code. Regards!