如何将数组的值放入角度js的复选框中

时间:2016-09-12 14:11:52

标签: angularjs

我的API在一个看起来像这样的数组中有响应 [“电子邮件”,“电子邮件”。 我想使用数据映射到复选框中的值,以便我可以使用该值将电子邮件发送到选定的复选框联系人。

我该如何解决这个问题?

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
			})
		})
	}

这是我控制器中的代码。我的问题是来自http请求的数据在数组中,如['john @ gmail.com,janedoe @ gmail.com] 我想将这些数组值用于复选框以向他们发送电子邮件

1 个答案:

答案 0 :(得分:2)

您必须更改当前的数据结构您不知道发送或关闭了哪个电子邮件。我的结构主张是:

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

如果无法在服务器端完成,您当然可以在JavaScript中更改结构。如何设置此结构以查看复选框 - 检查工作示例:

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

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

   //example data
   var data=[
   "test1@email.com",
   "test2@email.com",
   "test3@email.com"
   
   ];

   $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>

因此我们设置为ng-model复选框send对象属性的send,并在开始时绑定,复选框状态的每次更改都会更改我们的body, html { position: fixed; }属性。