angularJs购物汇总

最新推荐文章于 2021-01-30 23:12:46 发布

神秘的玖零

最新推荐文章于 2021-01-30 23:12:46 发布

阅读量275

点赞数

文章标签： angularJs

本文链接：https://blog.youkuaiyun.com/zihang0814/article/details/78345838

版权

angularJs 专栏收录该内容

9 篇文章

订阅专栏

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	body
	{
	width: 1600px;
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;
	}
	table
	{
	width: 1000px;
	margin: auto;
	margin-top: 50px;
	}
	div
	{
	margin: auto;
	margin-top: 20px;
	width: 500px;
	height: 500px;
	background: #c0a16b;
	}
	.b
	{
	background: red;
	width: 200px;
	height:200px;
	}
	button
	{
	background: #2aabd2;
	}
	.red
	{
	border: 1px solid red;
	}
	</style>
	<script src="../angular-1.5.5/angular.js"></script>
	<script>
	var myapp=angular.module("myapp",[]);
	myapp.controller("myCtrl",function ($scope) {
	$scope.data=
	[
	{done:false,sname:"iPhone4",name:"张三",phone:"15111111111",price:4999,city:"北京",time:"08-01 10:00",zhuai:"发货"},
	{done:false,sname:"小米6",name:"李四",phone:"1522222222",price:2999,city:"北京",time:"08-02 10:00",zhuai:"发货"},
	{done:false,sname:"华为P9",name:"王五",phone:"15333333333",price:3999,city:"上海",time:"09-03 10:00",zhuai:"已发货"},
	{done:false,sname:"oppo r11",name:"赵六",phone:"154444444444",price:4999,city:"天津",time:"09-05 10:00",zhuai:"已收货"},
	{done:false,sname:"vivo",name:"周七",phone:"15555555555",price:2999,city:"重庆",time:"10-04 10:00",zhuai:"已发货"},
	]
	//隐藏
	$scope.show=false;
	//新增订单
	$scope.newD=function () {
	$scope.show=true;
	}
	$scope.uname="";
	$scope.uphone="";
	$scope.ucity="选择城市";
	//城市查询
	$scope.citys=function (item) {
	if( $scope.ucity!="选择城市")
	{
	if( $scope.ucity==item.city)
	{
	return true;
	}
	else
	{
	return false;
	}
	}
	else
	{
	return true;
	}
	}
	//状态查询
	$scope.uzhuai="状态";
	//城市查询
	$scope.zhuais=function (item) {
	if( $scope.uzhuai!="状态")
	{
	if( $scope.uzhuai==item.zhuai)
	{
	return true;
	}
	else
	{
	return false;
	}
	}
	else
	{
	return true;
	}
	}
	//状态变化
	$scope.zhuang=function (index) {
	if($scope.data[index].zhuai=="发货")
	{
	$scope.data[index].zhuai="已发货";
	}
	if($scope.data[index].zhuai=="已发货")
	{
	$scope.data[index].zhuai="已收货";
	}
	}
	//排序
	$scope.sortname="";

	$scope.pai=function (name) {
	$scope.sortname=name;
	}
	//批量删除
	$scope.delete=function () {
	var n=0;
	for(var i=0;i<$scope.data.length;i++)
	{
	if($scope.data[i].done==true)
	{
	$scope.data.splice(i,1);
	n++;
	i--;
	}
	}
	if(n==0)
	{
	alert("请勾选!!!");
	}
	}
	//全选反选
	$scope.check=false;
	$scope.checkAll=function () {
	for(var i=0;i<$scope.data.length;i++)
	{
	if( $scope.check==true)
	{
	$scope.data[i].done=true;
	}
	else
	{
	$scope.data[i].done=false;
	}
	}
	}
	//全选按钮状态
	$scope.checks=function () {
	var n=0;

	for(var i=0;i<$scope.data.length;i++)
	{
	if($scope.data[i].done==true)
	{
	n++;
	}
	else
	{
	n--;
	}
	}
	if(n==$scope.data.length)
	{
	$scope.check=true;
	}
	else
	{
	$scope.check=false;
	}
	}
	//日期之间
	$scope.kai="开始月份";
	$scope.jie="结束月份";
	$scope.pan=function () {

	if( $scope.kai!="开始月份" && $scope.jie!="结束月份")
	{
	//装换为int类型判断
	var kai=parseInt( $scope.kai);
	var jie=parseInt($scope.jie);
	for(var i=0;i<$scope.data.length;i++)
	{
	//拆分时间
	var arr=$scope.data[i].time.split("-");
	var da=parseInt(arr[0]);
	console.log(da);
	//判断
	if(da>=kai && da<=jie)
	{
	return true;
	}
	else
	{
	return false;
	}
	}
	}
	else
	{
	return true;
	}
	}
	//添加新客户
	$scope.newsname="";
	$scope.newname="";
	$scope.newphone="";
	$scope.b=false;
	$scope.redcheck=false;
	$scope.newcity="请选择";
	$scope.tj=function () {

	if($scope.newsname==""\|\| $scope.newsname.length<6 \|\| $scope.newsname.length>20 \|\| $scope.newname.length<4 \|\| $scope.newname>16 \|\| $scope.newcity=="请选择")
	{
	$scope.b=true;
	$scope.redcheck=true;
	}
	else
	{
	$scope.data.push({done:false,sname: $scope.newsname,name:$scope.newname,phone:$scope.newphone,price:1999,city:$scope.newcity,time:"",zhuai:"发货"})
	}
	}
	})
	</script>
	</head>
	<body ng-app="myapp" ng-controller="myCtrl">
	<input type="text" placeholder="用户名搜索" ng-model="uname">
	<input type="text" placeholder="手机号搜索" ng-model="uphone">
	<select ng-model="ucity">
	<option>选择城市</option>
	<option>北京</option>
	<option>上海</option>
	<option>天津</option>
	<option>重庆</option>
	</select>
	<select ng-model="uzhuai">
	<option>状态</option>
	<option>待发货</option>
	<option>发货</option>
	<option>已收货</option>
	<option>已发货</option>
	</select>
	<select ng-model="kai">
	<option>开始月份</option>
	<option>01</option>
	<option>02</option>
	<option>03</option>
	<option>04</option>
	<option>05</option>
	<option>06</option>
	<option>07</option>
	<option>08</option>
	<option>09</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	</select>-
	<select ng-model="jie" ng-change="pan()">
	<option>结束月份</option>
	<option>01</option>
	<option>02</option>
	<option>03</option>
	<option>04</option>
	<option>05</option>
	<option>06</option>
	<option>07</option>
	<option>08</option>
	<option>09</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	</select><br/><br/><br/>
	<button ng-click="newD()">新增订单</button><button ng-click="delete()">批量删除</button>
	<table border="1px solide #000">
	<thead>
	<tr>
	<th><input type="checkbox" ng-model="check" ng-click="checkAll()"></th>
	<th>下标<span><button ng-click="pai('$index')">排序</button></span></th>
	<th>商品名称</th>
	<th>用户名</th>
	<th>手机号</th>
	<th>价格<span><button ng-click="pai('price')">排序</button></span></th>
	<th>城市</th>
	<th>下单时间<span><button ng-click="pai('time')">排序</button></span></th>
	<th>状态</th>
	</tr>
	</thead>
	<tbody>
	<tr ng-repeat="item in data\|filter:{'name':uname}\|filter:{'phone':uphone}\|filter:citys\|filter:zhuais\|orderBy:sortname\|filter:pan">
	<td><input type="checkbox" ng-model="item.done" ng-click="checks()"></td>
	<td>{{$index}}</td>
	<td>{{item.sname}}</td>
	<td>{{item.name}}</td>
	<td>{{item.phone}}</td>
	<td>{{item.price\|currency:"￥"}}</td>
	<td>{{item.city}}</td>
	<td>{{item.time}}</td>
	<td ng-click="zhuang($index)">{{item.zhuai}}</td>
	</tr>
	</tbody>
	</table>
	<div ng-show="show">
	<h2>新增订单</h2>
	商品名:<input type="text" placeholder="6-20个字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/>
	用户名:<input type="text" placeholder="4-16个字符" ng-class="{red:redcheck}" ng-model="newname"><br/><br/>
	手机号:<input type="text" ng-class="{red:redcheck}" ng-model="newphone"><br/><br/>
	城市:
	<select ng-model="newcity">
	<option>请选择</option>
	<option>北京</option>
	<option>上海</option>
	<option>天津</option>
	<option>重庆</option>
	</option>
	</select><br/><br/>
	<div class="b" ng-show="b">
	<p>商品名不能为空!</p>
	<p>商品名必须是6-12个字符!</p>
	<p>用户名不能为空!</p>
	<p>用户名必须是4-16个字符!</p>
	<p>手机号不能为空!</p>
	</div>
	<button ng-click="tj()">提交</button>
	</div>
	</body>
	</html>