Add group of checkbox in add more functionality

ionic-v1
1

I am new to ionic1 framework and working on sidemenu ionic app. In my form i have 4 choices for user and user can select multiple choices. For this i want checkbox here. I also have Add more functionality to generate dynamically input in form. I can not understand how to put checkbox here and get values of checkboxes.

Please help me.

2

HI, @hariomtech

are you add dynamic check box

3

@vd_virani yes i am adding dynamic checkbox.

4

Hi, @hariomtech

this code will add dynamic check box
template file

  <div ng-repeat="item in checkboxs">
          <input type="checkbox"  value="{{item.name}}"/>{{item.name}}
        </div>
        <br><br>
        check box name
        <form>
        <input type="text" ng-model="namecheckbox">

        <button class = "button" ng-click="addcheck(namecheckbox)">Add</button>
        </form>

component file

$scope.namecheckbox='';
  $scope.checkboxs=[{name:'apple'},{name:'graps'}];
  $scope.addcheck= function (data){
    $scope.checkboxs.push({name:data});
   
  }

Hope this will help you
Thanks

5

hello @addwebsolution thank you so much for the reply… but i need checkbox values. i am able to create checkbox dynamically but unable to get values of selected checkbox.

6

Hi, @hariomtech

check now

component file


$scope.namecheckbox='';
$scope.alldata=[];
  $scope.checkboxs=[{name:'apple',checked:false},{name:'graps',checked:true}];
  $scope.addcheck= function (data){
    $scope.checkboxs.push({name:data,checked:false});
  }
$scope.save= function (data){
  for(var i =0;i<$scope.checkboxs.length;i++){
  
    if($scope.checkboxs[i].checked==true){
      $scope.alldata.push($scope.checkboxs[i].name);
    }
  }
}
$scope.clear=function(){
  $scope.alldata=[];
}

Template file

 <div ng-repeat="item in checkboxs">
          <input type="checkbox"  value="{{item.name}}" ng-model="item.checked" ng-click='clear()'/>{{item.name}}
        </div>
        <br><br>
        check box name
        <form>
        <input type="text" ng-model="namecheckbox" placeholder="checkbox name ">

        <button class = "button" ng-click="addcheck(namecheckbox)">Add</button>
        <button class = "button" ng-click="save()">save</button>

      </form>
      <div ng-repeat="data in alldata">{{data}}</div>

Hope this will solve your issue.

7

Thank you so much @addwebsolution i have tried your code its working fine in my case i can not understand how to integrate.
JS code
`$scope.chk= [{ text: “Standard”, checked: true }
,{ text: “Urgent”, checked: false }
,{ text: “Extra Work”, checked: false }
,{ text: “Extra Heavy”, checked: false }
];

$scope.choices = [{id: ‘choice1’}];
$scope.addNewChoice = function() {
$scope.rbtn=true;
var newItemNo = $scope.choices.length+1;
$scope.choices.push({‘id’:‘choice’+newItemNo });

};

$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);

};`

HTML code


 

  
  
  
  

  
   {{item.text}} 
 


Remove     
Add more