Angular基本使用

1.数组
$scope.stus=[];


2.往数组内添加数据
$scope.stus.push()


3.遍历数组
ng-repeat="st in stus"


4.删除数组
$scope.stus.splice(i,1);、、i为方法内传过来的$index

5.遍历的同时    orderBy: 排序+    filter查询

查询的输入框：

ng-repeat="st in stus|filter:{name:sname}|orderBy:age"


4.butt按钮添加点击事件
ng-click="add()"


5.butt按钮添加点击事件并传索引值
ng-click="del($index)


6.对象
var stuyy={name:"糖糖",sex:"女"}

7.弹框（带确定取消）

.var c=confirm("您是否要清空购物车");//
 if(c==false){
return;
 }

8.表格隔行变色

 table tr:nth-child(odd){background:#F4F4F4;}  

9.input表单提示语

    <input placeholder="用户名搜索"  ng-model="sname"/>  

10.单选框的使用

男： 
女： 

获取到值：$scope.add_sex

11.通过出生年月得到当前年龄

//年龄
$scope.getAge=function(d){
var dr=new Date(d).getYear();//出生的年
var dq=new Date().getYear();//当前年份
return dq-dr;

}

12.对象中带对象的属性获取

{{d.department.name}}//部门名称

13.通过部门名称（对象中带对象）模糊查询

//通过ng-show在里面写一个带参方法，参数为：部门名称

//部门模糊查询
				$scope.xsbm=function(bm){
					if($scope.ssname==undefined||$scope.ssname==""){
						return true;
					}
					
					if(bm.indexOf($scope.ssname)>-1){
						return true;
					}
					return false;
				}

14.input输入框：圆角边框

一.货币过滤器+data时间

{{g.price|currency:'￥'}}

	
		
		
		
		
	
	
		

			

				{{g.name}}    {{g.price|currency:'￥'}}//货币过滤器：在价格前面加符号（不会进行运算）   {{g.regdate|date:"yyyy-MM-dd hh:mm:ss"}}//时间
			
			
{{sum()}}
		
	

二.控制器

三.使用控制器

四.增

新增订单

			
			
			
			
			
			
			选择城市
			北京
			上海
			重庆
			天津
		 

		    下单时间：
		    
			选择状态
			已发货
			未发货
		
			保存
			
			
		

//添加数据 stus为数组名
		$scope.add=function(){
					//添加时如果商品名中有“米”，替换成*
					var reg_=/米/g;
					var suname=$scope.add_gname.replace(reg_,"*");
					
					
                var adddata={
                	id:$scope.stus.length+1,//id
                	gname:suname,//商品名称
                	name:$scope.add_name,//用户名
                	tel:$scope.add_tel,//电话
                	price:$scope.add_price,//价格
                	op:$scope.add_op,//城市
                	data:$scope.add_data,//发货时间
                        zt:$scope.add_zt}//发货状态
			$scope.stus.push(adddata);//像数组中添加数据
			$scope.showadd=false;//隐藏div
				
			}

带验证的增加数据

添加新产品

				
添加商品
 商品编号：
				

 商品名称：
				

 商品价格：
				


				

					

						
{{chenk}}
					
				

				
			

//新增商品
				$scope.formShow = false;
				$scope.formShowFun = function() {
					if($scope.formShow) {
						$scope.formShow = false;
					} else {
						$scope.formShow = true;
						$scope.updateShow = false;
					}
				}

//提交新加商品进行验证
				$scope.newId = "";
				$scope.newName = "";
				$scope.newPrice = "";
				$scope.checkSub = [];
				$scope.divShow = false;
				$scope.sub = function() {
					$scope.checkSub = [];  //存放错误信息的数组
					
					if($scope.newId == "" || $scope.newId == null) {
						$scope.checkSub.push("产品编号为空");
					} else if(isNaN($scope.newId)) {
						$scope.checkSub.push("产品编号不是整数");
					}
					
					
					if($scope.newName == "" || $scope.newName == null) {
						$scope.checkSub.push("产品名称为空");
					}
					if($scope.newPrice == "" || $scope.newPrice == null) {
						$scope.checkSub.push("产品价格为空");
					} else if(isNaN($scope.newPrice)) {
						$scope.checkSub.push("产品价格不是整数");
					}

					if($scope.checkSub.length > 0) {
						$scope.divShow = true;
					} else {
						$scope.divShow = false;
						var newPro = {
							"id": parseInt($scope.newId),
							"name": $scope.newName,
							"price": parseInt($scope.newPrice),
							state: false
						};
						$scope.products.push(newPro);
					}
				}

五.删

批量删除：

批量删除

//批量删除
				$scope.delall=function(){
					var count=0;
					//遍历数组
					for(var i=0;i<$scope.stus.length;i++){
						if($scope.stus[i].ck){
							count++;
						$scope.stus.splice(i,1);
						i--;
						}
						
					}
					if(count==0){
						alert("请选择");
					}
				}

单行删除：

删除

//删除
				$scope.del=function(n){
					$scope.stus.splice(n,1);
				}

传的参数为id而不是index的删除方法

				删除

//删除
				
				$scope.del=function(id){  //js删除 只能根据索引删除
					//根据id查找id所对应索引
					var index=0;
					for(var i in $scope.datas){
						if( $scope.datas[i].id==id){
							index=i;
						}
					}
					
					//弹框确认是否删除
					var f= confirm("确定删除吗?");
					if(f){
						$scope.datas.splice(index,1);
					}
				}

六 .改

修改商品名称

                    
					 {{d.gname}}     
						
						 保存 	
					
					

带弹框+验证的修改

修改

			

				
修改商品
 商品编号：
				

 商品名称：
				

 商品价格：
				


				

					

						
{{chenk}}
					
				

				
			

$scope.updateSub = function() {
					$scope.updateArr = [];
					if($scope.updateName == "" || $scope.updateName == null) {
						$scope.updateArr.push("产品名称为空");
					}
					if($scope.updatePrice == "" || $scope.updatePrice == null) {
						$scope.updateArr.push("产品价格为空");
					} else if(isNaN($scope.updatePrice)) {
						$scope.updateArr.push("产品价格不是整数");
					}
					//验证不满足
					if($scope.updateArr.length > 0) {
						$scope.haha = true;
					} else {
						$scope.haha = false;
						for(index in $scope.products) {
							if(parseInt($scope.updateId) == $scope.products[index].id) {
								$scope.products[index].name = $scope.updateName;
								$scope.products[index].price = $scope.updatePrice;
								$scope.updateShow = false;
							}
						}
					}
				}

七.查

		
		
			选择城市
			北京
			上海
			重庆
			天津
		

根据开始月份+结束月份查

//按月份显示
				$scope.yue=function(m){
					var currentd=m.getMonth()+1;
					//获取开始日期
				var start=$scope.startm;
				//获取结束月份
				var end=$scope.endm;
				if(start==undefined&&end==undefined){
					return true;
				}else if(currentd>=start&¤td<=end){
					return true;
				}
				return false;
				}

			开始月份
			1
			2
			3
			4
			5
			6
			7
			8
			9
			10
			11
			12
		-
		
			结束月份
			1
			2
			3
			4
			5
			6
			7
			8
			9
			10
			11
			12
		
		

根据年龄区间（10-20）（20-30）

年龄查找
		
			
			10-20
			20-30
			30-40
		

//通过年龄显示
                $scope.valprice=function(p){
					//获取到选中价格
					var prica_b= $scope.pricea;//10-20
					if(prica_b==undefined||prica_b==""){
						return true;
					}
					
					//拆分
					var as= prica_b.split("-");
					var minage= as[0];
					var maxage=as[1];
					
					if(p>=minage && p<=maxage){
						return true;
					}else{
						return false;
					}
					
				}

八.排序

			ID排序
			ID由高到低
			ID由低到高
		

九.全选反选

//控制行

//全选反选
				$scope.ckall=function(){
					for (var i=0;i<$scope.stus.length;i++) {
						$scope.stus[i].ck=$scope.flag;
					}
				}

十。点击实现更改发货状态

{{d.zt}} {{d.zt}}

批量发货

//批量发货
				$scope.pl=function(){
					var count=0;
					//遍历数组
					for(var i=0;i<$scope.stus.length;i++){
						if($scope.stus[i].ck){
							count++;
							$scope.stus[i].zt='已发货';
						}
					}
					if(count==0){
						alert("请选择");
					}
				}

清空购物车：

//清空购物车
				
				$scope.qk=function(){
				    var c=	confirm("您是否要清空购物车");//
				    if(c==false){
				    	return;
				    }
					$scope.stus.splice(0);
							
					$scope.uu=true;
				}

我的购物车
	
	
购物车为空，请继续购物
	

+-操作

//+-
				$scope.count=function(n,i){
					$scope.stus[i].number=$scope.stus[i].number+n;
					if($scope.stus[i].number==0){
						var c=	confirm("您是否要删除这个商品");//
				    if(c==false){
				    	$scope.stus[i].number=1;
				    	return;
				    }
						$scope.stus.splice(i,1);
					}
				}

-
				
				+

完整版

	
		
		
		
		
		
	
	
		

		
主界面效果：

		
		
		
			选择城市
			北京
			上海
			重庆
			天津
		
		
			选择状态
			已发货
			未发货
		
		
			开始月份
			1
			2
			3
			4
			5
			6
			7
			8
			9
			10
			11
			12
		-
		
			结束月份
			1
			2
			3
			4
			5
			6
			7
			8
			9
			10
			11
			12
		
		
		
			ID排序
			ID由高到低
			ID由低到高
		

		新增订单批量发货批量删除  敏感字：米（商品名）->替换成*
		

			

				

				
ID
				
商品名
				
用户名
				
手机号
				
价格
				
城市
				
下单时间
				
状态
				
操作
				
				
			
			

				

				
{{d.id}}
				

                    
					 {{d.gname}}     
						
						 保存 	
					
					
				
{{d.name}}
				
{{d.tel}}
				
{{d.price}}
				
				
{{d.op}}
				
{{d.data|date:"MM-dd hh:mm"}}
				

					{{d.zt}} 
					{{d.zt}}
					
					
				
修改商品名称删除
				
			
		
		

			
			
			
			
			
			
			选择城市
			北京
			上海
			重庆
			天津
		 

		    下单时间：
		    
			选择状态
			已发货
			未发货
		
			保存
			
			
		
		
		
	

简单版（带+-）

	
		
		
		
		
		
	
	
		

	
我的购物车
	
	
购物车为空，请继续购物
	

		
	
	
		按数量正序排序
		按数量倒序排序
		
	
	入库
	

	

	清空购物车
	

		

			
 
			
name
			
price
			
number
			
totalprice
			
option
			
		
		

			

			
{{d.name}}
			
{{d.price}}
			
-+ 
			
{{d.price*d.number|currency:'￥'}}
			
删除
			
		
		

			
总价：￥{{sum()}}
		
	
	
	
	

带弹框的添加+修改+验证

	
		
		
		
		
	

	
		
			
购物车
			 产品价格
			
				--请选择--
				0-2000
				2001-3000
				3001-4000
				4001-5000
				5001-6000
				6001-7000
				7001-8000
				8001-无穷大
			
			
				排序方式
				id正序
				id逆序
				价格正序
				价格逆序
			
			批量删除
			


			

				

					

						
 
						
产品编号
						
产品名称
						
产品价格
						
操作
					
				
				

					

						

						
{{pro.id}}
						
{{pro.name}}
						
{{pro.price | currency:"￥："}}
						

							删除
							修改
						
					
				
			

			添加新产品


			

				
添加商品
 商品编号：
				

 商品名称：
				

 商品价格：
				


				

					

						
{{chenk}}
					
				

				
			
			
			
			
			
			
			
			
			
			
			
			

				
修改商品
 商品编号：
				

 商品名称：
				

 商品价格：
				


				

					

						
{{chenk}}
					
				

				
			
		
	

添加时带验证的方法：

添加用户

//添加用户
                $scope.forshow=false;
                $scope.add=function(){
                	if($scope.forshow) {
						$scope.forshow = false;
					} else {
						$scope.forshow = true;
						
					}
                	
                }

			

				
姓名
				
 
				
			
			

				
密码
				
 
				
			
			

				
年龄
				
 
				
			
			

				
性别
				
男： 
				女： 
				
			
			

				

					提交
				
			
		

  //添加后提交
                
				$scope.add_name = "";
				$scope.add_pwd = "";
				$scope.add_age = "";
				$scope.add_sex = "";
               $scope.sub=function(){
				
					if($scope.add_name == "" || $scope.add_name == null) {
						$("#sname1").text("用户名为空");
					}else{
						$("#sname1").text("");
					}
					
					
					if($scope.add_pwd == "" || $scope.add_pwd == null) {
						
						$("#spwd1").text("密码为空");
					} else{
						$("#spwd1").text("");
					}
               	if($scope.add_age == "" || $scope.add_age == null) {
					
						$("#sage1").text("年龄为空");
						
					}else if(isNaN($scope.add_age)) {
						
						$("#sage1").text("年龄不是整数");
						
					}else{
						$("#sage1").text("");
					}
						if($scope.add_name == "" || $scope.add_name == null||$scope.add_age == "" || $scope.add_age == null||$scope.add_pwd == "" || $scope.add_pwd == null){
							var c=confirm("属性为空，确认添加吗");
                       if(c==false){
                            return;
                         }
						}
					
					var newPro = {
						
							"name": $scope.add_name,
							"pwd": $scope.add_pwd,
							"age": parseInt($scope.add_age),
							"sex":$scope.add_sex,
							
						};

						$scope.stus.push(newPro);
						$scope.forshow = false;
               }

http过滤器（json解析）

	
		
		
		
		
	
	
		获取数据 
		

			

				
姓名
				
头像
				
年龄
				
性别
				
专辑
				
			
			

				
{{d.name}}
				

				
{{d.age}}
				
{{d.sex}}
				
{{d.ablum}}
				
			
		
	

直接用网址解析JSON

var app=angular.module("tangapp",[]);
app.controller("demo",function($scope,$http){
//获取网络数据
				$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
				.then(function(d){
					$scope.datas=d.data;
				});