Angular小功能及组件

1. 插入删除

    //新增选项行$scope.addTableRow=function(){	$scope.entity.specificationOptionList.push({});		}//批量选项删除  ng-click="deleTablenRow($index)$scope.deleTableRow=function(index){			$scope.entity.specificationOptionList.splice(index,1);//删除			} 

2.select2 组件

$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,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;i0){value+=","}value+=json[i][key];			}return value;}

    html中使用

{{jsonToString(entity.brandIds,'text')}}
{{jsonToString(entity.specIds,'text')}}								 
{{jsonToString(entity.customAttributeItems,'text')}}	

面包屑导航

	                        	
顶级分类列表
{{entity_1.name}}
{{entity_2.name}}

	$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);	//查询此级下级列表}

普通下拉框

          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

         "checkbox"  ng-checked="true">选中

         "checkbox"  ng-checked="false">非选中

三目运算符

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！