how to put value of array into checkbox in angular js

Question

I have response from my API in an array which looks like this ["email","email"]. I want to use the data to map to values in a checkbox so that I could use the value to send email to selected checkbox contacts.

How can I tackle this?

if($stateParams.nonExists){
		console.log($stateParams.nonExists)
		$scope.nonExists = $stateParams.nonExists
	}
	if($stateParams.data){
		return $q(function(resolve,reject){
			$http.get('/google/contacts?code='+$stateParams.data).
			success(function(res){
				if(res && res.length){
					resolve(res)
					console.log(res);
				}

		})
		})
		.then(function(emails){
			$http.post('/user/import/exists',{emails:_.pluck(emails,'address')}).
			success(function(data){
				$scope.existUsers = data.data.exists
				$scope.nonExists = data.data.nonExists
			})
		})
	}

This is the code in my controller. My problem is the data from the http request is in array like ['[email protected], [email protected]] and I want to use those array values into checkbox to send emails to them

angular views are just a reflection of your model, so, just update the model... — Hitmands
– Hitmands, Commented Sep 12, 2016 at 14:13
I have it in my Scope variable but since it is just values i am having problem using it as my model. — Sajak Upadhyaya
– Sajak Upadhyaya, Commented Sep 12, 2016 at 14:17
Can you provide us your code, and explain a bit more what you exactly want? :) — Mistalis
– Mistalis, Commented Sep 12, 2016 at 14:20

Maciej Sikora · Accepted Answer · 2016-09-12 15:12:43Z

2

You must change data structure in current You don't know which email is on or off for sending. My proposition for structure is:

[
{"email":"email","send":false},
{"email":"email","send":true},
//...other emails
]

You can of course change structure in JavaScript if it cannot be done on servers side. How to set this structure to view with checkboxes - check working example:

var app=new angular.module("checkbox",[]);

app.controller("main",function($scope){

   //example data
   var data=[
   "[email protected]",
   "[email protected]",
   "[email protected]"
   
   ];

   $scope.checkboxes=[];//create new structure


   //convert to new structure
   for (var i=0; i<data.length; i++){

      $scope.checkboxes.push({email:data[i],send:false});//we add elements to new structure
   }
  
  
    //function is only for showing send property change
    $scope.showChange=function(element){

       console.log("You changed: "+element.email);

    };


    //function is doing conversion to previous structure
    $scope.getMailsForSend=function(){
       
        var emails=[];

        for (var i=0; i<$scope.checkboxes.length; i++){
              
            if ($scope.checkboxes[i].send)
            emails.push( $scope.checkboxes[i].email );//add only mails with send on true         
 
        }

        console.log("Your checked email adresses:");
        console.log(emails);

        return emails;
    };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="checkbox">

  <div ng-controller="main">
  <div ng-repeat="check in checkboxes">
  {{check.email}}<input type="checkbox" ng-change="showChange(check)" ng-model="check.send">
  </div>
  <button ng-click="getMailsForSend()">Give checked email adresses</button>
  </div>

  
</div>

So we set as ng-model of checkbox send object property and it is binded on beginning and every change of checkbox state changes our send property.

edited Sep 12, 2016 at 15:12

answered Sep 12, 2016 at 14:21

Maciej Sikora

20.3k4 gold badges52 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sajak Upadhyaya Over a year ago

could you please take a look now I added a portion of my code.

Maciej Sikora Over a year ago

@SajakUpadhyaya I updated code with conversion from orginal structure.

Maciej Sikora Over a year ago

@SajakUpadhyaya i added function to convert backward - check results on button click. Function gives only set emails.

Sajak Upadhyaya Over a year ago

I am sorry I was out on a vacation !! This helped thank you so much.

Collectives™ on Stack Overflow

how to put value of array into checkbox in angular js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related