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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
js三种排序算法分享
Aug 16 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 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
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
python非递归全排列实现方法
2017/04/10 Python
python看某个模块的版本方法
2018/10/16 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
python中spy++的使用超详细教程
2021/01/29 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
.NET概念性的面试题
2012/02/29 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
征婚广告词
2014/03/17 职场文书
产品推广策划方案
2014/05/10 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
老公保证书怎么写
2015/02/26 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
用python自动生成日历
2021/04/24 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers