程序博客网 > 淘宝神舟昆山工厂店

angularjs增删 查询 排序(修改)

来源：互联网 发布：淘宝神舟昆山工厂店 编辑：程序博客网 时间：2024/06/01 09:38
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>月考练习</title>
        <style>
            *{
                margin: 0 auto;
                padding: 0;
            }
            nav{
                width: 50%;
                margin-top: 50px;
            }
            .btncolor{
                background-color: dodgerblue;
                border-radius: 6px;
            }
            table{
                width: 50%;
                margin-top: 5px;
            }
            .laft{
                margin-left: 230px;
            }
            .true {
                background: greenyellow;
                border-radius: 10px;
            }
            
            .false {
                background: yellow;
                border-radius: 10px;
            }
        </style>
        <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script type="text/javascript">
            var mo=angular.module("myApp",[]);
            mo.controller("myCtrl",function($scope){
                //初始数据
                var arr = [{
                    "flag":false,
                    "gid": "2001",
                    "gname": "iPhoneX",
                    "uname": "张三",
                    "tel": "13525565588",
                    "price": 8699.00,
                    "city": "北京",
                    "time":1509104021000,
                    "state":false
                },{
                    "flag":false,
                    "gid": "3006",
                    "gname": "iPhone6",
                    "uname": "王红",
                    "tel": "18524565588",
                    "price": 5635.00,
                    "city": "郑州",
                    "time":1513104021000,
                    "state":false
                },{
                    "flag":false,
                    "gid": "5312",
                    "gname": "iPhone7",
                    "uname": "赵小龙",
                    "tel": "17545585598",
                    "price": 6180.00,
                    "city": "北京",
                    "time":1523104021000,
                    "state":false
                },{
                    "flag":false,
                    "gid": "2132",
                    "gname": "iPhone8",
                    "uname": "赵强",
                    "tel": "17625565618",
                    "price": 7190.00,
                    "city": "上海",
                    "time": 1503104021000,
                    "state":false
                }];
                //初始化界面
                $scope.goods = arr;
                //发货
                $scope.didgoods=function($index){
                    arr[$index].state=true;
                }
                //根据名字查询
                $scope.selgname=function($event){
                    var arr_temp=[];//定义临时数组
                    if ($event.keyCode==13) {
                        for (var i=0;i<arr.length;i++) {//遍历数组查询
                            if (arr[i].gname.indexOf($scope.name)!=-1) {
                                arr_temp.push(arr[i]);
                            }
                        }//赋值
                        $scope.goods=arr_temp;
                    }
                }
                //根据手机号查询
                $scope.seltel=function($event){
                    var arr_temp=[];//定义临时数组
                    if ($event.keyCode==13) {
                        for (var i=0;i<arr.length;i++) {//遍历数组查询
                            if (arr[i].tel.indexOf($scope.tel)!=-1) {
                                arr_temp.push(arr[i]);
                            }
                        }//赋值
                        $scope.goods=arr_temp;
                    }
                }
                //筛选发货/未发货
                $scope.isFaHuo=function() {
                    var arr_temp=[];//定义一个临时数组，储存对象
                    if ($scope.did=="已发货") {//获取select里面的值
                        for(var i=0;i<arr.length;i++){
                            var ff=arr[i].state;//获取发货状态
                            if (ff==true) {
                                arr_temp.push(arr[i]);
                            }
                        }
                    } else{
                        for(var i=0;i<arr.length;i++){
                            var ff=arr[i].state;//获取发货状态
                            if (ff==false) {
                                arr_temp.push(arr[i]);
                            }
                        }
                    }
                    //赋值
                    $scope.goods=arr_temp;
                }
                            /*goods 自负责显示 MVVM
                            arr   负责数据
                            临时arr_temp 临时储存结果*/
                //根据id排序
                var gid_flag=true;
                $scope.gid_orderBy=function(){
                    if (gid_flag==true) {
                        arr.sort(function(a,b){
                            return a.gid-b.gid;
                        })
                    } else{
                        arr.sort(function(a,b){
                            return b.gid-a.gid;
                        });
                    }
                    gid_flag=!gid_flag;
                    $scope.goods=arr;
                }
                    //根据价格排序
                var price_flag=true;
                $scope.price_orderBy=function(){
                    if (price_flag==true) {
                        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;
                }
                //根据时间排序
                var time_flag=true;
                $scope.time_orderBy=function(){
                    if (time_flag==true) {
                        arr.sort(function(a,b){
                            return a.time-b.time;
                        })
                    } else{
                        arr.sort(function(a,b){
                            return b.time-a.time;
                        });
                    }
                    time_flag=!time_flag;
                    $scope.goods=arr;
                }
                //批量删除
                $scope.dele=function(){
                    //遍历数组，flag = true,而且state = true;删除，否则不删除
                    for (var i=arr.length-1;i>=0;i--) {
                        var good=arr[i];
                        if (good.flag&&good.state) {
                            arr.splice(i,1)
                        }
                    }
                    $scope.goods=arr;
                }
                //点击复选框，改变选中状态
                $scope.box=function($index){
                    arr[$index].flag=!arr[$index].flag;
                    $scope.goods=arr;
                }
                
                $scope.click=function(){
                    $scope.show=true;
                    $scope.gname1="";
                    $scope.uname1="";
                    $scope.tel1="";
                    $scope.price1="";
                    $scope.city1="";
                }
            
              function sj(){
                  var math=Math.random()*10000;
                  return Math.ceil(math);
              }
              
              function selnull(){
                  $("span").each(function(){
                      $(this).html("");
                  })
                  
              }
                $scope.add=function(){
                    selnull();
                    var flag=false;
                if ($scope.gname1==undefined||$scope.gname1=="") {
                        $("#gname1_lag").html("<font color='red'>商品名不能为空</font>")
                        $("#gname1").css({"border":"1px solid red"})
                        flag=false;
                }else if($scope.uname1==undefined||$scope.uname1=="") {
                    $("#gname1").css({"border":"1px solid  #000000"})
                    $("#uname1_lag").html("<font color='red'>用户名不能为空</font>")
                    $("#uname1").css({"border":"1px solid red"})
                        flag=false;
                    }else if ($scope.tel1==undefined||$scope.tel1=="") {
                        $("#uname1").css({"border":"1px solid  #000000"})
                        $("#tel1_lag").html("<font color='red'>电话号码不能为空</font>")
                        $("#tel1").css({"border":"1px solid red"})
                        flag=false;
                    }else if ($scope.price1==undefined||$scope.price1=="") {
                        $("#tel1").css({"border":"1px solid  #000000"})
                        $("#price1_lag").html("<font color='red'>价格不能为空</font>")
                        $("#price1").css({"border":"1px solid red"})
                        flag=false;
                    }else if ($scope.city1==undefined||$scope.city1=="") {
                        $("#price1").css({"border":"1px solid  #000000"})
                        $("#city1_lag").html("<font color='red'>城市必选</font>")
                        $("#city1").css({"border":"1px solid red"})
                        flag=false;
                    }else{
                        flag=true;
                    }
                    if (flag) {
                        var obj={
                            "flag":false,
                            "gid": sj(),
                            "gname": $scope.gname1,
                            "uname": $scope.uname1,
                            "tel": $scope.tel1,
                            "price": $scope.price1,
                            "city": $scope.city1,
                            "state":false
                        }
                        $scope.goods.push(obj);
                        $scope.show=false;
                    }
                }
            })
            //自定义过滤器，根据state的状态，返回不同的值
            mo.filter("myFilter",function(){
                return function(obj){
                    if (obj) {
                        return "已发货";
                    } else{
                        return "未发货";
                    }
                    return obj;
                }
            })
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        
        <nav>
            <input type="button" value="新增订单" class="btncolor" ng-click="click()"/>
            <input type="button" value="批量删除" class="btncolor" ng-click="dele()"/>
            <input type="text" placeholder="按商品名称查询" class="laft" ng-keydown="selgname($event)" ng-model="name" style="border-radius: 6px;"/>
            <input type="text" placeholder="按手机号查询" ng-keydown="seltel($event)" ng-model="tel" style="border-radius: 6px;"/>
            <select ng-change="isFaHuo()" ng-model="did" ng-init="did='--按状态查询--'" style="border-radius: 6px;">
                <option>--按状态查询--</option>
                <option>已发货</option>
                <option>未发货</option>
            </select>
        </nav>
        <center>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th><input type="checkbox"/></th>
                <th>id<input type="button" value="排序" class="btncolor" ng-click="gid_orderBy()"/></th>
                <th>商品名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>价格<input type="button" value="排序" class="btncolor" ng-click="price_orderBy()"/></th>
                <th>城市</th>
                <th>下单时间<input type="button" value="排序" class="btncolor" ng-click="time_orderBy()"/></th>
                <th>状态</th>
            </tr>
            <tr ng-repeat="good in goods">
                    <td align="center"><input type="checkbox" ng-click="box($index)" /></td>
                    <td>{{good.gid}}</td>
                    <td>{{good.gname}}</td>
                    <td>{{good.uname}}</td>
                    <td>{{good.tel}}</td>
                    <td>{{good.price|currency:"¥:"}}</td>
                    <td>{{good.city}}</td>
                    <td>{{good.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
                    <td align="center">
                    <input type="button" value="{{good.state|myFilter}}" class="{{good.state}}" ng-click="didgoods($index)"/>
                    </td>
                </tr>
        </table>
        <fieldset ng-show="show">
            <legend>添加用户信息</legend>
            商品名<input type="text" ng-model="gname1" id="gname1"/><span id="gname1_lag"></span><br />
            用户名<input type="text" ng-model="uname1" id="uname1"/><span id="uname1_lag"></span><br />
            手机号<input type="text" ng-model="tel1" id="tel1"/><span id="tel1_lag"></span><br />
            价格为<input type="text" ng-model="price1" id="price1"/><span id="price1_lag"></span><br />
            城市<input type="text" ng-model="city1" id="city1"/><span id="city1_lag"></span><br />
            <button ng-click="add()">保存</button>
        </fieldset>
        </center>
    </body>

</html>





    /*    $scope.click=function(){
                    $scope.show=true;
                     $scope.uname="";
                     $scope.uage="";
                     $scope.ucity="";
                       $scope.add=function(){
                                  var obj={
                    "flag":false,
                    "name": $scope.uname,
                    "age": $scope.uage,
                    "city": $scope.ucity
                }
                    $scope.users.push(obj)
                    $scope.show=false;
                  }
                }
                
                  $scope.update = function($index){
                   $scope.show=true;                
                    $scope.uname=$scope.users[$index].name;
                    $scope.uage=$scope.users[$index].age;
                    $scope.ucity=$scope.users[$index].city;
                    $scope.index=$index;
                    $scope.add=function(index){
                    if (index!=undefined||index!="") {
                        var text={
                    "name": $scope.uname,
                    "age": $scope.uage,
                    "city": $scope.ucity
                }
                        $scope.users.splice($scope.index,1,text);
                            $scope.show=false;
                    }
                }
                   };
                */



阅读全文
0 0
淘宝神舟昆山工厂店 淘宝神舟昆山工厂店
原创粉丝点击
热门IT博客
剑灵帅气男捏脸数据剑灵帅气男捏脸数据
淘宝三颗心多少信誉淘宝三颗心多少信誉
淘宝二手图形工作站
java的http通信
爱淘宝怎么复制链接
艾克里里淘宝店链接
西安软件新城2016
七叔的淘宝店
普华永道部门 知乎
call me maybe 知乎
七牛云存储 阿里云oss
淘宝油烟净化器
jre 8u91 windows x32
简单微信商城源码
用excel进行数据分析
python io模块
打电话不要钱的软件
java随机生成一串字母
python idle教程
windows怎么访问samba
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 徽州黄梅唱吧歌曲大全 唱吧歌曲下载 我们约会吧出场歌曲 达拉崩吧歌曲 黄河水歌曲 依呀呀噢咧噢歌曲 汉堡呀汉堡薯条呀薯条歌曲 让这风吹呀吹粤语歌曲 歌曲马儿呀你慢些走 妈好呀妈好呀我想你歌曲 黄河的水呀长呀么长又长歌曲 啊咦呀咦啊咦呀咦是什么歌曲 黄河的水呀水长流什么歌曲 咱的家大呀歌曲 嘿呀嘿呀是什么歌曲 哎呀呀歌曲抖音 新版泡沫之夏歌曲 泡沫之夏歌曲大全 有国才有家歌曲 败家娘们歌曲 想家歌曲 关于家的歌曲 歌曲家在中国 复兴耶稣的家歌曲 我爱我的家歌曲 妈在家就在歌曲 家在东北歌曲 记得咱的家原唱歌曲 我想有个家歌曲 我的家在山卡卡头歌曲 歌曲妈在家就在原唱 思念家的歌曲有哪些 女人家歌曲 歌曲家和万事兴 歌曲想家的时候 歌曲我想有个家 想家的爷们歌曲 我家娘子白素贞歌曲 72家租客里的歌曲 记的咱的家歌曲原唱 记得咱的家歌曲

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里