Home >Web Front-end >JS Tutorial >Angularjs adds sorting query function code sharing

Angularjs adds sorting query function code sharing

小云云Original: 2018-01-03 13:32:531038browse

This article mainly introduces the example code of adding sorting query function in Angularjs. Friends who need it can refer to it. I hope it can help everyone.

Without further ado, I will post the code directly for you. The specific code is as follows:

 <!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">
<p>
  查询<br>
  <input type="text" class="input" ng-model="names">
</p>
<!--//排序-->
<p style="position: absolute;top: 10px;left: 500px">
  排序<br>
  <select class="select" ng-model="b">
    <option value="">票数正序</option>
    <option value="-">票数倒序</option>
  </select>
</p>
<!--新增球员按钮-->
<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:{&#39;name&#39;:names} | orderBy:b+&#39;number&#39;">
    <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>

Related recommendations:

Detailed example of ajax implementation of paging query function

How to use PHP to call the API interface to implement weather query function

PHP implements database Detailed examples of paging and multi-condition query functions

The above is the detailed content of Angularjs adds sorting query function code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Define global variables and global function methods in the vue projectNext article：Define global variables and global function methods in the vue project

See more

Angularjs adds sorting query function code sharing

Related articles