Angular小功能及組件

1. 插入刪除

<tr ng-repeat="pojo in entity.specificationOptionList">
         <td><input  type="checkbox"></td> 
	<td>
	<input ng-model="pojo.optionName" class="form-control" placeholder="規格選項"> 
	</td>
	<td>
	<input ng-model="pojo.orders" class="form-control" placeholder="排序"> 
	</td>
</tr>

    //新增選項行
	$scope.addTableRow=function(){	
		$scope.entity.specificationOptionList.push({});		
	}

    //批量選項刪除  ng-click="deleTablenRow($index)
	$scope.deleTableRow=function(index){			
		$scope.entity.specificationOptionList.splice(index,1);//刪除			
	} 

2.select2 組件

   <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/angular-select2.js">  </script>

$scope.brandList={data:[{id:1,text:'聯想'},{id:2,text:'華爲'},{id:3,text:'小米'}]};

<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="選擇品牌（可多選）" class="form-control" type="text"/>		

    multiple 表示可多選, Config用於配置數據來源, select2-model用於指定用戶選擇後提交的變量

   效果如下：

 

json數據優化顯示:

    優化前

        

    優化後

        

    實現

    //提取json字符串數據中某個屬性，返回拼接字符串 逗號分隔
	$scope.jsonToString=function(jsonString,key){
		var json=JSON.parse(jsonString);//將json字符串轉換爲json對象
		var value="";
		for(var i=0;i<json.length;i++){		
			if(i>0){
				value+=","
			}
			value+=json[i][key];			
		}
		return value;
	}

    html中使用

<td>{{jsonToString(entity.brandIds,'text')}}</td>
<td>{{jsonToString(entity.specIds,'text')}}</td>								 
<td>{{jsonToString(entity.customAttributeItems,'text')}}</td>	

麪包屑導航

<ol class="breadcrumb">	                        	
  <li><a href="#" ng-click="grade=1;selectList({id:0})">頂級分類列表</a></li>
  <li><a href="#" ng-click="grade=2;selectList(entity_1)">{{entity_1.name}}</a></li>
  <li><a href="#" ng-click="grade=3;selectList(entity_2)">{{entity_2.name}}</a></li>
</ol>

	$scope.grade=1;//默認爲1級	
	//設置級別
	$scope.setGrade=function(value){
		$scope.grade=value;
	}		
	//讀取列表
	$scope.selectList=function(p_entity){			
		if($scope.grade==1){//如果爲1級
			$scope.entity_1=null;	
			$scope.entity_2=null;
		}		
		if($scope.grade==2){//如果爲2級
			$scope.entity_1=p_entity;	
			$scope.entity_2=null;
		}		
		if($scope.grade==3){//如果爲3級
			$scope.entity_2=p_entity;		
		}		
		$scope.findByParentId(p_entity.id);	//查詢此級下級列表
	}

普通下拉框

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id as item.name for item in itemCat1List"></select>

          ng-options屬性可以在表達式中使用數組或對象來自動生成一個select中的option列表。ng-options與ng-repeat很相似，很多時候可以用ng-repeat來代替ng-options。但是ng-options提供了一些好處，例如減少內存提高速度，以及提供選擇框的選項來讓用戶選擇。

        運行效果如下：

        

$watch方法用於監控某個變量的值，當被監控的值發生變化，就自動執行相應的函數。例如:

$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {          
    	//根據選擇的值，查詢二級分類
    	itemCatService.findByParentId(newValue).success(
    		function(response){
    			$scope.itemCat2List=response; 	    			
    		}
    	);    	
}); 

深克隆JSON.parse( JSON.stringify( oldRow )  );//深克隆

$location服務

        地址欄輸入   http://localhost:9102/admin/goods_edit.html#?id=149187842867969 

        注意： ?前要加# ，則是angularJS的地址路由的書寫形式

        $location.search()['id'];//獲取參數值

ng-checked

         <input  type="checkbox"  ng-checked="true">選中

         <input  type="checkbox"  ng-checked="false">非選中

三目運算符

        <li class="{{$index==0?'active':''}}"  ></li>

 $interval服務簡介

        在AngularJS中$interval服務用來處理間歇性處理一些事情,格式爲： 

             $interval(執行的函數,間隔的毫秒數,運行次數); 運行次數可以缺省，如果缺省則無限循環執行

        取消執行用cancel方法  $interval.cancel(time);

//我先現在先做一個簡單的例子：10秒倒計時  ，首先引入$interval ,  控制層編寫代碼如下：
	$scope.second = 10; 
	time= $interval(function(){ 
	  if($scope.second>0){ 
		$scope.second =$scope.second-1;  			
	  }else{
		  $interval.cancel(time); 		  
		  alert("秒殺服務已結束");
	  }
	},1000);
//頁面用表達式顯示$scope.second的值