CODEWITHSUNDEEP
javascripthtmlangularjscheckboxionic-framework
Suraz Khanal
Suraz Khanal

Reputation: 222

dynamic form field with checkbox in angularjs

I want to submit values of the input field to controller with ng-submit but it shows undefined when i console input model.Each input values are saved with check box. But i want to check if any checkbox is unchecked or not. Here is form html:

<form id="valueForm" ng-submit="submitValues()">
    <div class="small-input list padding" style="padding-top:4px;">
        <div ng-repeat="item in inputs  track by $index">
            <label class="item item-input">
                    <input type="text"  placeholder="" ng-model="value" ng-disabled="ticked">
                    <ion-checkbox ng-click="addField($index)"  ng-change="saveValue(ticked,value,$index)" ng-model="ticked"  
                           ng-disabled="!value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
            </label>
        </div>
    </div>
    <button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
    </form>

Here is controller:

 $scope.showButton = false;
  $scope.inputs = [{value:''}];
  var checkedValues =[];
  $scope.addField = function (index) {
      if($scope.inputs.length <= index+1 && $scope.inputs.length<10){
                  $scope.inputs.splice(index+1,0,name);
      }
  }
  $scope.saveValue = function (ticked,item,index) {

    if(ticked){
      console.log('index'+index);
      if(index>0) $scope.showButton =true;
      checkedValues.splice(index,0,item);
      console.log(checkedValues);
    }else{
      checkedValues.splice(index,1);
      console.log(checkedValues);
    }

  }
  $scope.submitValues = function(){
    console.log($scope.value);
  }

Upvotes: 0

Views: 755

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Because the inputs and checkboxes are inside an ng-repeat directive, the ng-model values need to be a property of the item iterator.

<form id="valueForm" ng-submit="submitValues()">
    <div ng-repeat="item in inputs  track by $index">
         <!-- REMOVE
         <input type="text" ng-model="value" ng-disabled="ticked">
         <ion-checkbox ng-model="ticked"> </ion-checkbox>
         -->
         <!-- INSTEAD -->
         <input type="text" ng-model="item.value" 
                ng-disabled="item.ticked">
         <ion-checkbox ng-model="item.ticked"> </ion-checkbox>
    </div>
    <button type="submit" ng-show="showButton"> 
        <i class="ion-ios-arrow-forward"></i>
    </button>
</form>

The ng-repeat directive creates a child scope for each item. Using a value without a "dot" will put the value on each child scope. Hence the rule: "always use a 'dot' in your ng-models".

For more information, see AngularJS Wiki -- The Nuances of Prototypical Inheritance

UPDATE

To see the inputs on submit:

  $scope.submitValues = function(){
    //console.log($scope.value);
    console.log($scope.inputs);
  }

Upvotes: 1

Related Questions