關於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的狀態   從而顯示爲選中狀態