bind a textbox value if checkbox is checked

Question

how to pass a textbox value to controller based on condition . if checkbox is checked then bind the textbox with object value and pass to the controller other wise just leave it blank and pass the user input to controller.. what i am doing is not working. what is wrong with my code it is working in the case if checkbox is checked.

$scope.Product = [
        {"ProductID":12,"LNumber":"hrx",weght:"2"},
        {"ProductID":13,"LNumber":"pty",weght:"1"}
    ]

<div>
<div>
  <input type="checkbox" data-ng-model="Copyknotes" />
  <span >Copy notes from</span>
</div>

<table data-ng-repeat="Item in Product track by $index">                                          
   <tr >
     <td>                                              
        <input type="radio" name="groupName_{{Item.ProductID}}"  data-ng-model ="Item.isSelected"  />
     </td>
     <td data-ng-if="Copyknotes == true">
       <input type="text" data-ng-model="Item.LNumber">
      </td>
      <td data-ng-if="Copyknotes == false" id="hi">
      <input type="text" data-ng-model="Item.LNumber=""">
       </td>
       </tr>
</table>
</div>

maybe because Copyknotes is undefined if checkbox is not ticked? — jomsk1e
– jomsk1e, Commented Oct 24, 2016 at 13:54

Reshav · Accepted Answer · 2016-10-24 14:18:42Z

Just use

data-ng-init=""

instead of

data-ng-model="Item.LNumber="""

use

data-ng-model="Item.LNumber"


<table data-ng-repeat="Item in Product track by $index">                                          
   <tr >
     <td>                                              
        <input type="radio" name="groupName_{{Item.ProductID}}"  data-ng-model ="Item.isSelected"  />
     </td>
     <td data-ng-if="Copyknotes == true">
       <input type="text" data-ng-model="Item.LNumber">
      </td>
      <td data-ng-if="Copyknotes == false" id="hi">
      <input type="text" data-ng-model="Item.LNumber" data-ng-init="">
       </td>
       </tr>
</table>

Mohit Tanwani · Accepted Answer · 2016-10-24 13:55:35Z

1

Use scope.function

<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />

//Code should be inside Angular js controller
$scope.changeValue = function(Copyknotes){
   if(Copyknotes)
   {
     //Manipulate text box value here
     $scope.Item.LNumber = 'whatever';
   }
}

answered Oct 24, 2016 at 13:55

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

Comments

kodu.cloud · Accepted Answer · 2016-10-24 14:01:26Z

Here is an example: https://plnkr.co/edit/3Vtl6roWfL1ZqaR2nEvf

<td data-ng-if="Copyknotes == false">
    <input type="text" data-ng-model="Item.NNumber" ng-init="Item.NNumber = ''">
</td>

The expression was wrong - data-ng-model="Item.LNumber=""" - if you want to assign a new value, you can use Item.LNumber = "''" (two single quotes within double quotes) to avoid interference with tag attribute "" symbols. I've made a live example of how it could be done. Don't know if your controller need original values of input, so new values (when checkbox is unchecked) are saving to NNumber instead. You can freely change them to LNumber if you want. Also, ng-init directive is used to initiate NNumber parameter of object when inputs are rendered into view. Also you should define Copyknotes to compare. Or write your conditions like ng-if="Copyknotes", ng-if="!Copyknotes".

Araz Shamsaddinlouy · Accepted Answer · 2016-10-24 14:03:31Z

<input type="checkbox" data-ng-model="Copyknotes" ng-change="changeValue(Copyknotes)" />

first of all remove the data-ng-model and use following:

      //Code should be inside Angular js controller
        var oninput = null;
        $scope.changeValue = function(Copyknotes){
           if(Copyknotes)
           { 
             var oninput = document.getElementById("textbox").onchange =function(){
       $scope.item.LNumber = this.value;
           }
             //Manipulate text box value here

           }else{
             $scope.Item.LNumber = '';
             oninput = null 
           }
        }

Collectives™ on Stack Overflow

bind a textbox value if checkbox is checked

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related