Y

来源：互联网发布：程序员桌面壁纸高清编辑：程序博客网时间：2024/04/25 05:04

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"type="text/javascript"charset="utf-8"></script> <style type="text/css"> .btn { background: blue; border: 0px; border-radius: 3px; } .true { background: greenyellow; border: 0px; border-radius: 3px; } .false { background: yellow; border: 0px; border-radius: 3px; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl">  <div class="top"> <input type="button" value="新增订单" ng-click="" class="btn" /> <input type="button" value="批量删除" class="btn" ng-click="piliang1()" /> <input type="search" placeholder="按商品名称查询" class="name_s" ng-keydown="gname_cha($event)" ng-model="gname"> <input type="search" placeholder="按手机号查询" class="tel_s" ng-keydown="tel_cha($event)" ng-model="tel"> <select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'"> <option >--按状态查询--</option> <option >已发货</option> <option >未发货</option> </select> </div> <table border="1px" cellspacing="0px" cellpadding="0px" class="table"> <tr> <td><inputtype="checkbox"class="cb_top" /></td> <td>id<inputtype="button"value="排序"class="btn"ng-click="id_paixu()" /></td> <td>商品名</td> <td>用户名</td> <td>手机号</td> <td>价格<inputtype="button"value="排序"class="btn"ng-click="jiage_paixu()" /></td> <td>城市</td> <td>下单时间<inputtype="button"value="排序"class="btn"ng-click="shijian_paixu()" /></td> <td>状态</td> </tr> <tr ng-repeat="g in goods"> <td><inputtype="checkbox"class="cb_good"ng-click = "change2($index)"/></td> <td>{{g.id}}</td> <td>{{g.gname}}</td> <td>{{g.user}}</td> <td>{{g.tel}}</td> <td>{{g.price|currency:"￥："}}</td> <td>{{g.city}}</td> <td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td> <td><inputtype="button"value="{{g.state|myFilter}}"class="{{g.state}}"ng-click="fahuo1($index)" /></td> </tr> </table>  <div class="bottom"> <input type="button" value="添加商品信息" /> <fieldset> <legend>添加订单信息</legend> 商品名:<input type="text" class="add_gname" /><span></span><br> 用户名: <input type="text" class="add_user" /><span></span><br> 手机号: <input type="text" class="add_tel" /><span></span><br> 价格为: <input type="text" class="add_price" /><span></span><br> <select> <option>--请选择城市--</option> </select> <button>保存</button> </fieldset> </div> <script type="text/javascript"> var mo = angular.module("myApp", []); mo.controller("myCtrl", function($scope) { //初始数据 var arr = [{ "id": 2001, "isChecked": false, "gname": "iphoneX", "user": "张三", "tel": 12345678998, "price": 8699.00, "city": "北京", "time": new Date(167808).getTime(), "state": false }, { "id": 3006, "isChecked": false, "gname": "iphone6", "user": "lisi", "tel": 132898765765, "price": 5638.00, "city": "郑州", "time": new Date(1688888).getTime(), "state": false }, { "id": 5312, "isChecked": false, "gname": "iphone7", "user": "赵小龙", "tel": 15072656676, "price": 6180.00, "city": "北京", "time": new Date(21312312).getTime(), "state": false }, { "id": 2132, "isChecked": false, "gname": "iphone8", "user": "赵强", "tel": 186765446788, "price": 7190.00, "city": "上海", "time": new Date(543534534534).getTime(), "state": false }]; //初始haul界面 $scope.goods = arr; //发货 $scope.fahuo1 = function($index) { arr[$index].state = true; } //根据名字查询 $scope.gname_cha = function($event) { var arr_temp = []; //定义临时数组 var keyCode = $event.keyCode; if (keyCode == 13) { //遍历数组查询 for (var i = 0; i < arr.length; i++) { if (arr[i].gname.indexOf($scope.gname) != -1) { arr_temp.push(arr[i]); } } //赋值 $scope.goods = arr_temp; } } //根据手机号查询 $scope.tel_cha = function($event) { var arr_temp = []; //定义临时数组 var keyCode = $event.keyCode; if (keyCode == 13) { //遍历数组查询 for (var i = 0; i < arr.length; i++) { var t = arr[i].tel.toString(); if (t.indexOf($scope.tel) != -1) { arr_temp.push(arr[i]); } } //赋值 $scope.goods = arr_temp; } } //筛选发货/未发货 $scope.isFaHuo = function() { //定义一个临时数组，储存对象 var arr_temp = []; //获取select里面的值 var f = $scope.fahuo; if (f == "已发货") { for (var i = 0; i < arr.length; i++) { var f1 = arr[i].state; //获取发货状态 if (f1) { arr_temp.push(arr[i]); } } } else { for (var i = 0; i < arr.length; i++) { var f1 = arr[i].state; //获取发货状态 if (f1 == false) { arr_temp.push(arr[i]); } } } //赋值 //goods 自负责显示 MVVM //arr 负责数据 //临时arr_temp 临时储存结果 $scope.goods = arr_temp; } //根据id排序 var id_flag = true; $scope.id_paixu = function() { if (id_flag) { arr.sort(function(a, b) { return a.id - b.id; }); } else { arr.sort(function(a, b) { return b.id - a.id; }); } id_flag = !id_flag; $scope.goods = arr; } //根据价格排序 var price_flag = true; $scope.jiage_paixu = function(){ if (price_flag) { arr.sort(function(a, b) { return a.price - b.price; }); } else { arr.sort(function(a, b) { return b.price - a.price; }); } price_flag = !price_flag; $scope.goods = arr; } //批量删除 $scope.piliang1 = function(){ //遍历数组，如果isCheck = true,而且state = true;删除，否则不删除 for (var i = arr.length-1;i>=0;i--) { var g = arr[i]; var c = g.isChecked; var s = g.state; console.log(c+"--"+s) if (c&&s) { arr.splice(i,1); } } $scope.goods=arr; } //点击复选框，改变选中状态 $scope.change2 = function($index){ arr[$index].isChecked = !arr[$index].isChecked; $scope.goods=arr; } }) //自定义过滤器，根据state的状态，返回不同的值 mo.filter("myFilter", function() { return function(input) { if (input) { return "已发货"; } else { return "未发货"; } return input; } }) </script> </body> </html>

阅读全文

0 0