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 相关文章推荐
javascript是怎么继承的介绍
Jan 05 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
vue实现公共方法抽离
Jul 31 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简单判断文本编码的方法
2015/07/30 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
js资料prototype 属性
2007/03/13 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
财务经理岗位职责
2015/01/31 职场文书
药品开票员岗位职责
2015/04/15 职场文书
小学入学感言
2015/08/01 职场文书
公司保密管理制度
2015/08/04 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL