Error404 Error404 -4 years ago 41
AngularJS Question

How to duplicate an input when checkbox is checked on Angularjs?

I am trying to duplicate an

input
if a checkbox is checked. If it is not, then do not write anything on the second
checkbox
.

This is the code that references to those elements:

<form name="myCustomForm">
<input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="{{myCustomForm.ownerName.$viewValue}}" ng-false-value="''"/>
<input ng-model="ownerName" placeholder="Enter your name..." name="ownerName" id="ownerName" disabled>
<input ng-value="{{checkDuplicate.value1}}" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
</form>


On my controller I have the following to initialize the checkbox:

$scope.checkDuplicate = {
value1 : true
};


What I am trying to do

If a checkbox is checked then the second input will be autocompleted with the value of the first one. If not, then the second input will be empty until the user gives to it some value.




I have two problems here:

First one

If I set manually
true
or
false
depending on the state of the checkbox (I mean
ng-true-value="'true'"
and
ng-false-value="'false'"
) it retrieves well the value that the
checkbox
has.

But if I try to retrieve my
input
value as shown above I get an empty value (it does not matter if it has some value or not, it is always empty).

Second one

If I put my code as I have shown above it only gets the value first time (when the page is loaded), but not the following times I change the
checkbox
value.

Nevertheless, if I try to retrieve the value out of the
input
value I can get the value of the checkbox properly. I mean, if I do
<span>{{checkDuplicate.value1}}</span>
it is shown properly.

I have tried using
ng-change
but without success.

How can I solve these errors or how can I duplicate my
input
in a proper way when
checkbox
is checked?

Thanks in advance!

Answer Source

You can change the variable to track input or not. There is a working example.

Explanation

I changed the checkboxes ng-true-value and ng-false-value it is giving us a variable name witch you are using in ng-model of ownerName input. Then i changed duplicate inputs ng-model variable. It is changing depeding on checkboxes value. If checkbox is checked it is tracking $scope.inputs.name if it is not $scope.inputs.text

    var app = angular.module("app",[]);
    app.controller("ctrl", function($scope){

    $scope.inputs = {};

    $scope.checkDuplicate = {
       value1 : 'text'
    };

    })
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      </head>
      <body  ng-app="app" ng-controller="ctrl" >
      
      
      <form name="myCustomForm">
        <input type="checkbox" ng-model="checkDuplicate.value1" ng-true-value="name" ng-false-value="text"/>
        <input ng-model="inputs.name" placeholder="Enter your name..." name="ownerName"  id="ownerName" >
        <input ng-model="inputs[checkDuplicate.value1]" placeholder="Enter the name of the house in which you live..." name="houseOwnerName" required>
    </form>


      </body>
    </html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download