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 相关文章推荐
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
如何通过vscode运行调试javascript代码
Jul 24 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
php Smarty初体验二 获取配置信息
2011/08/08 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
Javascript Object.extend
2010/05/18 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
js实现照片墙功能实例
2015/02/05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
Python爬取网页信息的示例
2020/09/24 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
如何开发一个JQuery插件
2016/07/28 面试题
护理个人求职信范文
2014/01/08 职场文书
新课培训心得体会
2014/09/03 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL
服务器间如何实现文件共享
2022/05/20 Servers