关于Anjularjs 动态生成html 并在html上触发Anjularjs事件

思路：

想想每次那些数据需要初始化的，哪些数据数据改变的

选中的checkbox  需要记录  相对应的 name 在input中显示

                           相对应的 id  存在一个选中的数组里面

                            方便下次调用。

代码

	<div class="collection ">							
		<input type="text" class="input-st05" readonly onclick="showZTree(this)" id="userS" >
		<div class="dn">
			<ul   id="zTree-userS"></ul>
		</div>
	</div>

	<div class="collection ">							
		<input type="text" class="input-st05" readonly onclick="showZTree(this)" id="userS" >
		<div class="dn">
			<ul   id="zTree-userS"></ul>
		</div>
	</div>
	showZTree方法是要下面的div能够显示或者隐藏
	$scope.userIdArray =[];   //记录选中的id数组
	$scope.isCheckBoxs=[];    //记录checkbox的状态
	var val="";          //input 里数据
	$scope.方法名字=function(){
			$.ajax({
				type : "POST",
				url : url,  //你要请求的后台数据
				data : data,  //你需要传递给后端的值
				dataType : 'json',   传递参数的类型
				contentType : 'application/json',
				success : function(resp) {
					var temptop =1;   //为了判断是否是每组checkbox的第一个
					var data = resp;  //  后端得到的数据赋值 给data
					var preOrgId="preOrgId";  //user 属于哪一类  判断条件
					var $st;		  //页面赋值用的  
					//检测数据可用
					if(typeof(data)=="undefined"||data==null||data.length==0){
						$('#zTree-userS').html(""); 
						return;
					}
				/*  修改  checkbox 状态  上     默认的  xuchenbing*/
				   $('#zTree-userS').html("");  //初始化页面的html
				   $scope.isCheckBoxs=[];  //初始化checkbox
				   $("#userS").val("");  //初始化  val
				   val=""; 
				   //判断如果有值  则将全选按钮添加上去
				    if(data.length>0)
				    {
						$st=$("<div style='margin-left: 10px;' >  <label style='font-size:16px;'><input type='checkbox' ng-model='selectAll' ng-click='all(selectAll)'>全选</label></div> ");			
						$('#zTree-userS').append($compile($st)($scope));
						//console.log("222");
				    }
					
		for(var i=0;i<data.length;i++){
			var  user=data[i];
			var  org_id=user.orgId;
			//org_id  是部门信息
			if(org_id!=preOrgId){  //第一次肯定不相等
				if(i!=0){
					$st=$("<br/>");
					$('#zTree-userS').append($compile($st)($scope));
				}

				//添加当前部门名字
				$st=$("<em>"+user.org+"</em><br/>");
				$('#zTree-userS').append($compile($st)($scope));
				preOrgId=org_id;   //把当前部门赋值给  比较的temp 
				

				//添加当前部门  第一位
				$st=$("<div style='width:20%;display:inline-block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;' title='"+user.name+"'></div>");
				$st2=$("<input type='checkbox' ng-click='all("+user.id+")' ng-checked='isSelected("+user.id+")' name='zTree-userS'  style='margin-left:10px;' value='"+user.id+"' /><span >"+user.name+"</span>")
				$st.append($st2);
				
				
				$('#zTree-userS').append($compile($st)($scope));
				
				
				temptop =0;   //避免了当前部门 录入第一位成员的时候录入两次

				val += user.name+",";  //input  里面默认显示 每一个部门的第一个
				$scope.userIdArray.push(user.id);//   选中用户ID
			}
			//判断是否是 部门的第一个 如果不是 就进入if
			if(temptop>0){
$st=$("<div style='width:20%;display:inline-block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;' title='"+user.name+"'></div>");
				$st2=$("<input type='checkbox' ng-click='all("+user.id+")' ng-checked='isSelected("+user.id+")'  name='zTree-userS'  style='margin-left:10px;' value='"+user.id+"' /><span >"+user.name+"</span>")
				$st.append($st2);
				$('#zTree-userS').append($compile($st)($scope));
			}
			temptop=1;
			// 将选项都存进这个数组中 方便改变  checkbox的状态
			$scope.isCheckBoxs.push({user_id:user.id,state:false,user_name:user.name});
			//console.log(i+"abc");
		}
					val = val.substring(0,val.length-1); //将val  去除最后的逗号	
					$("#userS").val(val);
				} 
			});
		}
		/*修改checkbox 的状态   xuchenbing*/
		$scope.all= function (m) { 
			console.log("abc2222");
			val="";
		    for(var i=0;i<$scope.isCheckBoxs.length;i++){ 
		      if(m==true){  
		          $scope.isCheckBoxs[i].state=true;  //全选时  把checkbox的状态都为true	          
		          val += $scope.isCheckBoxs[i].user_name+",";  //拼接  input的数据
		          $scope.userSIdArray.push($scope.isCheckBoxs[i].user_id);   //选中用户ID
		      }else if($scope.isCheckBoxs[i].user_id==m){
		    	    val="";
			$scope.userSIdArray=[];
			 $('input[name="zTree-userS"]:checked').each(function(){
				 $scope.userSIdArray.push($(this).val());//选中用户ID
				val+=$(this).next().text()+",";
			});
					
		          $scope.isCheckBoxs[i].state=true;
		      
		      } else if(m==false){
		    	  $scope.isCheckBoxs[i].state=false;			     
		            $scope.userSIdArray=[];	  
		      }	
			 val=val.substring(0,val.length-1);
			$("#userS").val(val);
		    }
		}; 
		/*检测checkbox 的状态  xuchenbing*/
		$scope.isSelected= function (user_id) { 			
		    for(var i=0;i<$scope.isCheckBoxs.length;i++){  		      
		      if($scope.isCheckBoxs[i].user_id==user_id){		    	  
		          return $scope.isCheckBoxs[i].state;
		      }  
		    }
		}; 	

第一次接触这个Anjularjs  感觉跟java  拥有很强的逻辑关系，此次是为了 研究 动态生成的html代码  如何被anjularjs 再次加载，从而触发ng-click 和ng- checked .  

ng-click 一个改变checkbox的状态。

ng-checked   检测checkbox的状态  从而在页面上反映是否是选中状态     最主要是为了 全选的时候能够让  全部checkbox的状态   从而显示为选中状态