1.完成页面布局，如图所示。
2. 声明数据对象，初始化订单信息，数据自拟且不低于四条
3. 用ng-repaet指令将对象遍历并渲染到页面中。
4. 使用AngularJS过滤器实现搜索功能。在订单搜索框中，输入商品名称可以动态按商品名称进行查询列表信息；在输入框中输入用户手机号即可根据用户手机动态查询出符合要求的信息。
5. 用户可以根据订单状态过滤订单信息，订单状态有二种，分别是已发货，未发货。如：用户点击下拉菜单选择”已发货”则查询出已发货的所有订单。
6. 用户点击”未发货”按钮时此时状态改变为已发货状态，按钮变为绿色。
7. 实现订单批量删除功能。用户只能删除已发货订单，不能删除未发货订单，用户点击多个已发货订单时可以批量删除选中订单。
8. 订单列表展示用户可以根据订单ID或商品价格或订单时间进行排序。当用户第一次点击排序时按正序排列，再点击排序时则按倒序排列。
9. 订单列表中信息中价格前需要添加”￥：”，订单时间需要格式为：”月-日 时：分：秒”。
10. 添加订单信息。提交订单时，检查表单，提示错误内容，并且将文本框颜色变红色，如果表单有误则提交不成功，如果表单无误则提交成功，提交成功的信息在列表展示。
//解题思路
1.主要是建立两个数组,一个全局展示数组$scope.goods=[],一个原始数组var goo=[],所有操作都是对原始数组进行操作,之后赋值给原始数组;
2.改变视图的时候,在点击事件传送name值进行判断
3.数组中有两个代表true和false的值,一个是复选框的选择状态ischecked,一个是发货的状态zt,通过过滤器进行判断是否发货
4.查询框可以用键盘按下事件,也可以用改变事件,但是过滤器都是同一个,参数是一个自拟名,通过两个输出框进行赋值
记住要先给赋值为空,不然有点小毛病
//代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><style>* {margin: 0 auto;padding: 0;}body {margin-top: 20px;width: 800px;}.in1 {margin-left: 20px;width: 120px;font-size: 18px;border-radius: 6px;background: #5CD6FF;}.in2 {margin-left: 20px;width: 120px;font-size: 15px;}.in3 {background: #1FC2EB;margin-left: 6px;border-radius: 4px;}.in4 {border-radius: 4px;}.ta {width: 710px;margin-left: 20px;margin-top: 10px;}.div2 {text-align: center;border: 1px solid yellowgreen;width: 400px;}.div2 input {width: 150px;height: 30px;}.div2 select {width: 150px;height: 30px;}/*状态 未发货的颜色*/.false {background: yellow;}/*状态 发货的颜色*/.true {background: #30FC30;}/*展示边框为红的样式,span的背景颜色*/span {background: yellow;border: 1px solid red;}/*展示边框为红的样式,错误提示的边框*/.in5 {border: 1px solid red;}</style></head><body ng-app="myapp" ng-controller="mycrl"><input class="in1" type="button" value="新增订单" ng-click="add()" /><input class="in1" type="button" value="批量删除" ng-click="dele()" /><input class="in2" type="search" ng-model="showname" placeholder="按商品名称查询" ng-keydown="sn($event)" /><input class="in2" type="search" ng-model="showtel" placeholder="按手机号查询" ng-keydown="sn($event)" /><select ng-change="sel()" style="margin-left: 10px;" ng-model="myselect" ng-init="myselect=aa[0]"ng-options="item for item in aa"></select><br /><table class="ta" border="1px" cellpadding="0px" cellspacing="0px"><tr style="background: #999999;"><th><input type="checkbox" ng-model="cb" ng-click="qx()" /></th><th>id<input class="in3" type="button" value="排序" ng-click="idp()" /></th><th>商品名</th><th>用户名</th><th>手机号</th><th>价格<input class="in3" type="button" value="排序" ng-click="pp()" /></th><th>城市</th><th>下订单时间<input class="in3" type="button" value="排序" ng-click="xp()" /></th><th>状态</th></tr><tr ng-repeat="g in goods|filter:Cx" align="center"><td><input type="checkbox" ng-checked="cb" ng-click="cb1(g.name)" /></td><td>{{g.id}}</td><td>{{g.gname}}</td><td>{{g.name}}</td><td>{{g.tel}}</td><td>{{g.price|currency:"¥:"}}</td><td>{{g.cs}}</td><td>{{g.time|date:"MM-dd HH:mm:ss"}}</td><td><input ng-click="fh(g.name)" type="button" value="{{g.zt|myfilter}}" class="{{g.zt}}" /></td></tr></table><br /><div class="div2" ng-show="isshow">商品名<input id="in1" type="text" ng-model="gname" /><span ng-model="s1" ng-show="iss1">{{s1}}</span><br /> 用户名<input id="in2" type="text" ng-model="name" /><span ng-model="s2" ng-show="iss2">{{s2}}</span><br /> 手机号<input id="in3" type="text" ng-model="tel" /><span ng-model="s3" ng-show="iss3">{{s3}}</span><br /> 价格为<input id="in4" type="text" ng-model="price" /><span ng-model="s4" ng-show="iss4">{{s4}}</span><br /> 城 市<select id="in5" ng-model="cs" ng-init="cs=bb[0]" ng-options="item for item in bb"></select><span ng-model="s4" ng-show="iss5">{{s5}}</span><br/></b><input type="button" value="保存" ng-click="bc()" /></div><script type="text/javascript">var mo = angular.module("myapp", []);mo.controller("mycrl", function($scope) {//定义按状态查询数组$scope.aa = ["--按状态查询数组--", "已发货", "未发货"];//定义一个城市数组$scope.bb = ["--选择城市--", "北京", "上海", "郑州", "长春"];//展示原始的数组 通过true和false控制发货的状态var goo = [{"id": 2001,"isChecked": false,"gname": "iPhoneX","name": "张三","tel": 13525565588,"price": 8699,"cs": "北京","time": 1513113960140,"zt": false}, {"id": 3006,"isChecked": false,"gname": "iPhone6","name": "王五","tel": 1842465588,"price": 5635,"cs": "郑州","time": 1513142960340,"zt": false}, {"id": 5312,"isChecked": false,"gname": "iPhone7","name": "赵小龙","tel": 17525565588,"price": 6180,"cs": "北京","time": 1513023960340,"zt": false}, {"id": 2001,"isChecked": false,"gname": "iPhone8","name": "李强","tel": 13225565588,"price": 7190,"cs": "上海","time": 1513043960340,"zt": false}];//付给展示的数组$scope.goods = goo;//id排序var flag1 = true;var flag2 = true;var flag3 = true;$scope.idp = function() {if(flag1) {$scope.goods.sort(function(a, b) {return a.id - b.id;});} else {$scope.goods.sort(function(a, b) {return b.id - a.id;});}flag1 = !flag1;}//价格排序$scope.pp = function() {if(flag2) {$scope.goods.sort(function(a, b) {return a.price - b.price;});} else {$scope.goods.sort(function(a, b) {return b.price - a.price;});}flag2 = !flag2;}//下订单时间排序$scope.xp = function() {if(flag3) {$scope.goods.sort(function(a, b) {return a.time - b.time;});} else {$scope.goods.sort(function(a, b) {return b.time - a.time;});}flag3 = !flag3;}//发货的点击事件$scope.fh = function(na) {//同时改变展示数组的状态for (var i = 0; i < goo.length;i++) {//找到name相同的改变其状态if(goo[i].name==na){//原始数据也要改变状态goo[i].zt=!goo[i].zt;}}}//查询的状态$scope.Cx = "";$scope.showname = "";$scope.showtel = "";//商品名和手机号的搜索$scope.sn = function($event) {//获取键盘按下状态var a = $event.keyCode;if(a == 13) {//是否为回车if ($scope.showname != "" && $scope.showname != null) {//判断商品搜索的model,在赋值给自定义变量$scope.Cx = {'gname': $scope.showname};} else if($scope.showtel != "" && $scope.showtel != null) {$scope.Cx = {'tel': $scope.showtel};} else {$scope.Cx = "";}return $scope.Cx;}}//全选的点击事件$scope.qx = function() {//当点击全选的时候要改变所以复选框的值for(var i = 0; i < goo.length; i++) {goo[i].isChecked =$scope.cb;}//在赋值给展示数据$scope.goods=goo;};//发货排序改变事件$scope.sel = function() {//定义一个临时数组，储存对象var arr_temp = [];var a = $scope.myselect;if(a == "已发货") {for(var i = 0; i < goo.length; i++) {//获取发货状态if(goo[i].zt) {arr_temp.push(goo[i]);}}}else if(a=="--按状态查询数组--"){arr_temp=goo;}else {for(var i = 0; i < goo.length; i++) {//获取发货状态if(goo[i].zt == false) {arr_temp.push(goo[i]);}}}//赋值//goods 自负责显示 MVVM//arr 负责数据//临时arr_temp 临时储存结果$scope.goods = arr_temp;};//复选框的点击事件,改变数组的选择值$scope.cb1 = function(na) {for (var i = 0; i < goo.length;i++) {//找到name相同的改变其状态if( goo[i].name==na){goo[i].isChecked=!goo[i].isChecked;}}}//批量删除$scope.dele = function() {//遍历原始数据//遍历数组，如果isCheck = true,而且zt = true;删除，否则不删除for(var i = goo.length - 1; i >= 0; i--) {var a = goo[i];var ischecked = a.isChecked;var zt = a.zt;if(ischecked && zt) {goo.splice(i,1);}}//在赋值给展示数据$scope.goods=goo;};//添加的点击事件 点击添加要把添加页面展示出来$scope.add = function() {$scope.isshow = true;}//保存的点击事件$scope.bc = function() {//获取输入的内容var gname = $scope.gname;var name = $scope.name;var tel = $scope.tel;var price = $scope.price;var cs = $scope.cs;if(gname == undefined || gname == "") {$scope.s1 = "商品名不能为空";$scope.iss1 = true; //显示边框//通过ID获取对象,改变class 展示边框为红的样式$("#in1").prop("class", "in5");return;} else {$scope.s1 = "";$scope.iss1 = false; //隐藏边框$("#in1").prop("class", "in9");}if(name == undefined || name == "") {$scope.s2 = "用户名不能为空";$scope.iss2 = true;$("#in2").prop("class", "in5");return;} else {$scope.s2 = "";$scope.iss2 = false;$("#in2").prop("class", "in9");}if(tel == undefined || tel == "") {$scope.s3 = "手机号不能为空";$scope.iss3 = true;$("#in3").prop("class", "in5");return;} else {$scope.s3 = "";$scope.iss3 = false;$("#in3").prop("class", "in9");}if(price == undefined || price == "") {$scope.s4 = "价格不能为空";$scope.iss4 = true;$("#in4").prop("class", "in5");return;} else {$("#in4").prop("class", "in9");$scope.s4 = "";$scope.iss4 = false;}if(cs == "--选择城市--") {$("#in5").prop("class", "in5");$scope.s5 = "城市必须选择";$scope.iss5 = true;return;} else {$("#in5").prop("class", "in9");$scope.s5 = "";$scope.iss5 = false;}var da = new Date();//添加到原始数据var id = Math.ceil(Math.random() * 10000);goo.push({"id": id,"isChecked": false,"gname": gname,"name": name,"tel": tel,"price": price,"cs": cs,"time": da.getTime(),"zt": false});//在赋值给展示数据$scope.goods = goo;//清空输入框并隐藏$scope.gname = "";$scope.name = "";$scope.tel = "";$scope.price = "";$scope.cs = $scope.bb[0];$scope.isshow = false;}});//自定义过滤器,通过传过来的数组状态(zt)参数进行赋值mo.filter("myfilter", function() {return function(input) {if(input) {return "已发货";} else {return "未发货";}return input;}});</script></body></html>
