mardi 13 juin 2017

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="" ng-false-value="''"/>
    <input ng-model="ownerName" placeholder="Enter your name..." name="ownerName"  id="ownerName" disabled>
    <input ng-value="" 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
};

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




Aucun commentaire:

Enregistrer un commentaire