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

来源：一二三四网

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

 <!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添加排序查询功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！