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的值