AngularJS一系列筛选，添加、显示

最新推荐文章于 2018-08-28 15:22:16 发布
原创 最新推荐文章于 2018-08-28 15:22:16 发布 · 735 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用AngularJS实现的订单管理系统，该系统具备强大的数据过滤、排序和操作功能，包括按用户名、手机号、城市、状态及月份筛选订单，支持新增、修改订单状态以及批量操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.js"></script>
    <style>
        p{
            text-align: center;
            margin-left:15px;
        }
        .bu{
            background: green;
            text-align: center;
            margin-left: 50px;
            color: white;
        }
        #bu{
            margin-left: 800px;
        }
        .button{
            background: green;
            text-align: center;
            color: white;
        }
        .tab{
            border-collapse: collapse;
            text-align: center;
            margin: 0 auto;
            width: 700px;
            margin-top: 20px;

        }
        .tab tr td,th{
            border: 1px solid black;
        }
        .tab tr:nth-child(1){background: #565656}
        .tab tr:nth-child(odd){background: #B1B1B1}
        .tab tr:nth-child(even){background: white}
        .red{
            color: #0c60ee;
            text-decoration:underline;
        }
        .div{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid black;
            margin-top: 20px;
        }
        ul{
            width: 300px;
            height: 200px;
            margin: 0 auto;
            background: lightcoral;
        }
        .cc{
            border: 1px solid red;
        }
    </style>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
         $scope.data=[
                        {check:false,id:1,goods:"iphone4",user:"张三",dh:"151111111",price:"4999.00",city:"北京",time:"08-01 10:00",zt:"发货"},
                        {check:false,id:2,goods:"小米6",user:"李四",dh:"15222222",price:"2999.00",city:"北京",time:"08-02 10:00",zt:"发货"},
                        {check:false,id:3,goods:"华为P9",user:"王五",dh:"153333333",price:"3999.00",city:"上海",time:"09-01 10:00",zt:"待发货"},
                        {check:false,id:4,goods:"oppo R11",user:"赵六",dh:"15444444",price:"4999.00",city:"天津",time:"09-03 10:00",zt:"已收货"},
                        {check:false,id:5,goods:"vivo",user:"周七",dh:"15555555",price:"2999.00",city:"淮安",time:"10-04 10:00",zt:"已发货"},
                      ];
           /* //判断发货的颜色
            $scope.has=false;
            for(var i=0;i<$scope.data.length;i++) {
                if ($scope.data[i].zt == "发货") {


                    $scope.has = true;
                    console.log($scope.has)
                    return;
                } else {

                    $scope.has = false;

                }
                break;
            }*/
         //按地区查询
            $scope.city="选择城市";
            $scope.cityfilter=function (item) {
                if($scope.city!="选择城市"){
                    if($scope.city==item.city){
                        if($scope.city=="淮安"){
                            return "淮安";
                        }
                        else
                        if($scope.city=="北京"){
                            return "北京";
                        }
                        else
                        if($scope.city=="上海"){
                            return "上海";
                        }
                        else
                        if($scope.city=="天津"){
                            return "天津";
                        }
                        else
                        if($scope.city=="重庆"){
                            return "重庆";
                        }
                    }
                }else{
                    return true;
                }
            }
           //按状态区分
            $scope.zt="选择状态";
            $scope.ztfilter=function (item) {
                if($scope.zt!="选择状态"){
                    if($scope.zt==item.zt){
                        if($scope.zt=="发货"){

                            return "发货";
                        }
                        else
                         if($scope.zt=="已发货"){

                             return "已发货";
                         }
                         else
                         if($scope.zt=="已收货"){

                             return "已收货";
                         }
                    }
                }else{
                    return true;
                }
            }


            // 通过月份过滤
            $scope.filterByMonth = function (order) {

                if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") {
                    return true;
                }

                if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") {
                    return true;
                }

                var beginMonth = parseInt($scope.filter_begin_month);
                var endMonth = parseInt($scope.filter_end_month);

                if (beginMonth > endMonth) {
                    return true;
                }

                var month = order.time.substr(0, order.time.indexOf("-"));
                month = parseInt(month);
                return (month >= beginMonth && month <= endMonth);
            };


            //id进行排序
            $scope.n=0;
            $scope.zj=false;
            $scope.sjpx=function () {
                $scope.n++;

                $scope.id=function (item) {

                     return item.id;
                }

                if($scope.n%2==0){
                    $scope.zj=true;
                }else{
                    $scope.zj=false;
                }
            }
          //价格进行排序
            $scope.n=0;
            $scope.jz=false;
            $scope.jgpx=function () {
                $scope.n++;

                $scope.jg=function (item) {

                    return item.price;
                }

                if($scope.n%2==0){
                    $scope.jz=true;
                }else{
                    $scope.jz=false;
                }
            }

            //按日期排序
            $scope.n=0;
            $scope.jj=false;
            $scope.timepx=function () {
                $scope.n++;

                $scope.rq=function (item) {

                    return item.time;
                }

                if($scope.n%2==0){
                    $scope.jj=true;
                }else{
                    $scope.jj=false;
                }
            }
            //全选
            $scope.qx=false;
            $scope.qxx=function () {
                if($scope.qx==true){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=true;
                    }
                }else if($scope.qx==false){
                    for(var i=0;i<$scope.data.length;i++){
                        $scope.data[i].check=false;
                    }
                }

            }
            //进行反选
               $scope.f=0;
             $scope.fx=function (index) {
                 if($scope.data[index].check==true){
                     $scope.f++;
                 }else{
                     $scope.f--;
                 }
                 if( $scope.f==$scope.data.length){
                     $scope.qx=true;
                 }else {
                     $scope.qx=false;
                 }
             }


            //2、点击“新增订单”，弹出上框，新增订单状态都是“待发货”
              $scope.xs=false;
               $scope.pname="商品名不能为空";
               $scope.uname="用户名不能为空";
               $scope.phone1="137705475147";
                $scope.xz="选择城市"
                $scope.show=false;
                 $scope.ff=false;  //判断边框红色
             $scope.add=function () {
                 $scope.xs=true;
                 //提交的动作
                 $scope.sub=function () {
                      //商品名不能为空
                      if($scope.pname!=null&&  $scope.pname!=""){
                          //商品名必须是6-20个字符
                          if(  $scope.pname.length>=6&& $scope.pname.length<=20){
                              //用户名不能为空
                              if($scope.uname!=null&&  $scope.uname!=""){
                                  //用户名必须是4-16个字符
                                  if( $scope.uname.length>=4&& $scope.uname.length<=16){
                                      // 手机号是不能为空
                                      if($scope.phone1!=null&&  $scope.phone1!=""){

                                          if(!(/^1(3|4|5|7|8)\d{9}$/.test( $scope.phone))){
                                              $scope.show=false;


                                                $scope.date=new Date().toLocaleTimeString();
                                               $scope.date1= new Date().toLocaleDateString()
                                                  $scope.dd= $scope.date1+"   "+ $scope.date;
                                               //添加
                                                  if($scope.xz!="选择城市"){

                                                      $scope.show=false;
                                                      $scope.data.push({check:false,id:$scope.data.length+1,goods:$scope.pname,user:  $scope.uname,dh:  $scope.phone1,price:"2999.00",city:$scope.xz,time: $scope.dd,zt:"待发货"})
                                                      $scope.xs=false;

                                              }
                                           }else{
                                              $scope.show=true;
                                          }
                                      }else{
                                          $scope.show=true;
                                      }
                                  }else{
                                      $scope.ff=true;
                                      $scope.show=true;
                                  }
                              }else{
                                  $scope.show=true;
                              }
                          }else{
                              $scope.show=true;
                          }
                      }else{
                          $scope.show=true;
                      }

                 }
            }
              //5、点击“发货”按钮，将“待发货”状态改成“已发货” （10分）

               $scope.pfh=function () {

                   for(var i=0; i<$scope.data.length;i++){
                       if($scope.data[i].check==true)  {
                        if($scope.data[i].zt=="待发货"){

                            $scope.data[i].zt="已发货";

                           }

                       }
                   }
               }




             $scope.dj=function (i) {
                 alert(i)
               if($scope.data[i].check==true&&$scope.data[i].zt=="发货")  {

                   $scope.data[i].zt="已发货";
               }
             }

             //批量删除
            $scope.del=function () {

                for(var i=0; i<$scope.data.length;i++){
                    if($scope.data[i].check==true)  {
                       $scope.data.splice(i,1);
                       i--;

                    }
                }
            }
        });
    </script>

</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p>
    <input type="text" placeholder="用户名搜索" ng-model="name"/>
    <input type="text" placeholder="手机号搜索" ng-model="phone"/>
    <select ng-model="city">
        <option>选择城市</option>
        <option>淮安</option>
        <option>北京</option>
        <option>上海</option>
        <option>重庆</option>
        <option>天津</option>
    </select>
    <select ng-model="zt">
        <option>选择状态</option>
        <option>发货</option>
        <option>已发货</option>
        <option>已收货</option>
    </select>
    <select class="choose_time_begin_month" ng-model="filter_begin_month">
        <option value="">开始月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select> -
    <select class="choose_time_end_month" ng-model="filter_end_month">
        <option value="">结束月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>

</p>

<button class="bu" id="bu" ng-click="add()">新增订单</button> <button class="bu" ng-click="pfh()">批量发货</button>  <button class="bu" ng-click="del()">批量删除</button>

<table class="tab">
    <tr>
        <th><input type="checkbox" ng-model="qx" ng-click="qxx()"/>全选</th>
        <th>ID <button class="button" ng-click="sjpx()">排序</button></th>
        <th>商品名</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格 <button class="button"  ng-click="jgpx()">排序</button></th>
        <th>城市</th>
        <th>下单时间 <button class="button" ng-click="timepx()" >排序</button></th>
        <th>状态</th>
    </tr>
    <tr ng-repeat="item in data|filter:{user:name}|filter:{dh:phone}|filter:cityfilter|filter:ztfilter|orderBy:id:zj|orderBy:jg:jz|orderBy:rq:jj|filter:filterByMonth">

        <td><input type="checkbox" ng-model="item.check" ng-click="fx($index)"/></td>
        <td>{{item.id}}</td>
        <td>{{item.goods}}</td>
        <td>{{item.user}}</td>
        <td>{{item.dh}}</td>
        <td>{{item.price|currency:"￥"}}</td>
        <td>{{item.city}}</td>
        <td>{{item.time}}</td>
        <td ng-class="{red:has}" ng-click="dj($index)">{{item.zt}}</td>
    </tr>

</table>
  <div class="div" ng-show="xs">
    <h3>新增订单</h3>
      <p>商品名：<input type="text" placeholder="6-20个字符" ng-model="pname"/></p>
      <p>用户名：<input type="text" placeholder="4-16个字符" ng-model="uname" ng-class="{cc:ff}"/></p>
      <p>手机号：<input type="text" ng-model="phone1"/></p>
      <p>
          城市 <select ng-model="xz">
          <option>选择城市</option>
          <option>淮安</option>
          <option>北京</option>
          <option>上海</option>
          <option>重庆</option>
          <option>天津</option>
      </select>

      </p>
      <ul ng-show="show">
          <li>商品名不能为空</li>
          <li>商品名必须是6-20个字符</li>
          <li>用户名不能为空</li>
          <li>用户名必须是4-16个字符</li>
          <li>手机号是不能为空</li>
          <li>手机号格式不正确</li>
          <li>请选择城市</li>
      </ul>
      <button class="bu" ng-click="sub()">提交</button>

  </div>
</body>
</html>


AngularJS筛选器
yidijimaodejiangyou的专栏
08-04 2316
AngularJS内置筛选器和自定义筛选器
angular表格带筛选分页，本地json
XINGXUEXX的博客
12-08 1267
list name city Bergamo London country Canada Italy
angular实现商品筛选功能
08-31
主要为大家详细介绍了angular实现商品筛选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJS一筛选，添加、过滤
wanleiSuper的博客
10-26 863
Title table{ border-collapse: collapse; } td,th{ padding: 10px; border: 1px solid #000; text-align: center; }
angularJS——高级筛选
zhangyufeng0126的博客
10-19 526
angularJS——高级筛选 1.效果图 2.前台代码 <ons-scroller class="hlyw-bg-seek" ng-class="{'isIOStop':isIOS}"> <div class="hlyw-filtrate-bt">分公司</div> <div class="h...
Angularjs 列表页面筛选
weixin_30413739的博客
09-20 183
个人博客链接：http://blog.yangqiong.com.cn/angularjs-lie-biao-ye-mian-shai-xuan/ 需求：页面URL和查询结果保持一致，当筛选条件变化时能够更新数据和URL 相关知识： $location.search()可以获取或者设置url参数 $scope.$watch 可以检测变量的变化 $routeProvider 中 relo...
AngularJS的-查询列表
09-14
AngularJS提供了一系列工具，如 Karma 和 Jasmine，用于编写单元测试和端到端测试，确保查询列表功能的正确性。 通过以上知识点的学习和实践，你将能够熟练地创建和管理AngularJS中的查询列表。这个过程中，你不仅...
angularjs-movies:一个基本的AngularJS应用，用于跟踪要观看的电影
05-18
本教程系列将展示如何使用AngularJS的基础知识。 您将学习如何制作一个简单的网页和一个简单的Web应用程序。 什么是AngularJS AngularJS是JavaScript中的开源框架。 它是由Google创建和维护的，它可以替代其他...
angularJs-datatable
05-01
Datatable 提供了一系列的事件，如 `drawCallback` 和 `rowCallback`，你可以注册回调函数以响应用户交互或表格状态变化。 在 `angularJs-datatable-master` 压缩包中，可能包含示例代码、文档、CSS 和 JavaScript ...
AngularJS学习笔记
12-08
- **12.2 对象处理**：AngularJS中包括一系列对象处理函数，如合并对象等。 - **12.3 类型判定**：AngularJS提供了一些函数来判断数据的类型，如`isUndefined`、`isArray`等。 #### 13. 其它服务 - **13.1 日志**...
AngularJs自定义过滤器创建指南
其中，HTML和CSS是构建视图的基础，Javascript是实现逻辑的核心，AngularJs是提供构建单页应用的框架支持，bootstrap是流行的前端UI框架，可以用来创建响应式布局，Web技术是指用于构建网页的一系列技术标准，包括...
angular.js + bootstrap 带数据搜索筛选的多功能分页插件
04-23
本demo使用bootstrap为前端页面框架，angular.js 为页面逻辑框架，制作了带数据加载，分页，并且支持快速搜索数据的表格分页插件，可以自定义显示多少条数据，动态管理各项设置。
AngularJS 的小demo——表头排序+表格搜索（过滤器）
Alfred的博客
09-08 400
使用AngularJS简单实现表头排序和表格搜索的功能，效果如下： 点击表头中的一项，可以根据该列属性对数据进行排序：        程序如下： [html] view plain copy >   html lang="en" ng-app="a3_4">   head>       met
angularjs组件之select
shunzizhan
11-26 1659
概况根据boss的要求，需要封装一些angularjs的组件，本着现学现卖的精神，特此封装了一个粗陋的下拉列表组件。 基本功能1.通过后台返回的数据生成默认的select(类似传统的select) 2.返回默认的选中项 3.自定义默认的选中项(比如添加默认的提示语：“请选择时间”) 4.支持复选 5.支持搜索 6.支持智能提示 前端暴露的样式单选<div fdc-select selectdatas
html+angularjs+redis获取后台数据模拟京东/天猫的商品分类导航
阿顾的博客
08-28 1965
文章中一些详细的说明，会在代码中用注释的方式解释，如果有疑问或者写的不好的地方可以留言交流 先上效果图（文末会附上源码）：  目录 一 数据库表结构 二 实体类设计  三 后端代码 3.1 数据访问层 3.2 redis属性文件 3.3 redis配置文件 3.4 接口层 3.5 服务层 3.6 控制层 四 前端代码 4.1 indexService.js文件 4....
angularjs商品列表(增删改查)
DING_YZz的博客
12-18 636
var app = angular.module("myApp", []);    app.controller("myCtrl", function($scope) {     $scope.shops = [{      id: 80,      name: "iPhone",      price: 5400,      num:10,      state: false  
angularjs按商品类型,点击加入购物车
love_mysunshine的博客
10-24 363
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> <!--导入angular包--> <script src="angular-1.5.5/angular.min.js"></script> <s
H5的confirm（对话框）、prompt（输入框）、setInterval（循坏定时器）
SXS120730的博客
10-08 4208
Title input{ text-align: center; width: 200px; height: 100px; margin: 0 auto; } button{ margin-top: 15px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值