Angularjs添加排序查询功能的实例代码


Posted in Javascript onOctober 24, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="angular-1.3.0.js"></script>
  <script type="text/javascript" src="jquery.1.12.4.js"></script>
  <script>
    var app=angular.module("myapp",[]);
    app.controller("myCtrl",function($scope){
      $scope.h=false;//显示和隐藏添加列表
      $scope.persons=[];//存放添加的内容
      $scope.xz=function(){//新增球员的点击事件点击列表出现
        $scope.h=true;
      }
      $scope.tj = function(){
        for(var i=0;i<$scope.persons.length;i++){//遍历列表的所有数据
          if($scope.name==$scope.persons[i].name) {//对比数据没有重复的姓名出现
            alert("您记录的内容已存在");
            return;
          }
        }
        //判断不能为空
        if($scope.name!=""&&$scope.name!=null){
          if($scope.wz!=""&&$scope.wz!=null){
            if($scope.hao!=""&&$scope.hao!=null){
              if($scope.number!=""&&$scope.number!=null){
                $scope.persons.push({//添加
                  name:$scope.name,
                  wz:$scope.wz,
                  hao:$scope.hao,
                  number:$scope.number});
                $scope.name="";
                $scope.wz="";
                $scope.hao="";
                $scope.number="";
                $scope.h=false;//添加成功添加表格关闭
              }else{
                alert("票?挡荒?榭?);
              }
            }else{
              alert("球号不能为空");
            }
          }else{
            alert("位置不能为空");
          }
        }else{
          alert("姓名不能为空");
        }
      }
    });
  </script>
  <!--//css样式-->
  <style>
    .input{
      width: 300px;
      height: 30px;
    }
    .select{
      width: 300px;
      height: 35px;
    }
    .button{
      background-color: deepskyblue;
      width: 100px;
      height: 60px;
      border-radius: 5%;
      margin-top: 30px;
    }
    .table{
      margin-top: 30px;
    }
    .table tr:nth-child(even){
      background-color: #eeeeee;
    }
    .table2{
      position: absolute;
      left: 300px;
      top: 650px;
    }
    .q{
      text-align: center;
    }
  </style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div>
  查询<br>
  <input type="text" class="input" ng-model="names">
</div>
<!--//排序-->
<div style="position: absolute;top: 10px;left: 500px">
  排序<br>
  <select class="select" ng-model="b">
    <option value="">票数正序</option>
    <option value="-">票数倒序</option>
  </select>
</div>
<!--新增球员按钮-->
<button class="button" ng-click="xz()">新增球员</button>
<table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">
  <tr style="background-color: #999">
    <th>姓名</th>
    <th>位置</th>
    <th>球号</th>
    <th>票数</th>
  </tr>
<!--展示界面-->
  <tr ng-repeat="person in persons | filter:{'name':names} | orderBy:b+'number'">
    <td class="q">{{person.name}}</td>
    <td class="q">{{person.wz}}</td>
    <td class="q">{{person.hao}}</td>
    <td class="q">{{person.number}}</td>
  </tr>
</table>
<!--添加的表单-->
<table border="1" cellspacing="0" cellpadding="10" class="table2" ng-show="h">
  <tr>
    <td>姓名</td>
    <td><input type="text" placeholder="请输入姓名" ng-model="name"></td>
  </tr>
  <tr>
    <td>位置</td>
    <td><input type="text" placeholder="请输入位置" ng-model="wz"></td>
  </tr>
  <tr>
    <td>球号</td>
    <td><input type="text" placeholder="请输入球号" ng-model="hao"></td>
  </tr>
  <tr>
    <td>票数</td>
    <td><input type="text" placeholder="请输入票数" ng-model="number"></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>
  </tr>
</table>
</body>
</html>

总结

以上所述是小编给大家介绍的Angularjs添加排序查询功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
js尾调用优化的实现
May 23 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 #Javascript
Vue.js2.0中的变化小结
Oct 24 #Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
分享vue.js devtools遇到一系列问题
Oct 24 #Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 #Javascript
Vue基于NUXT的SSR详解
Oct 24 #Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP中ob_start函数的使用说明
2013/11/11 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python列表的常用操作方法小结
2016/05/21 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
环保倡议书400字
2014/05/15 职场文书
毕业生求职信
2014/06/10 职场文书
大型公益活动策划方案
2014/08/20 职场文书
授权委托书
2014/09/17 职场文书
行政司机岗位职责
2015/04/10 职场文书
党支部半年考察意见
2015/06/01 职场文书
排球赛新闻稿
2015/07/17 职场文书
python如何正确使用yield
2021/05/21 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android