AngularJs实现添加排序

最新推荐文章于 2018-08-01 17:55:16 发布

gh0708

最新推荐文章于 2018-08-01 17:55:16 发布

阅读量464

点赞数

分类专栏： Web前段文章标签： ng-repeat angularjs

本文链接：https://blog.csdn.net/gh0708/article/details/78326397

版权

Web前段专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AngularJs实现添加查询排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        tr,td{
            border: 1px solid #000 ;
        }
        .bt{
            background: #0a9dc7;
        }
    </style>
    <script src="angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.data=[{
                name:"张三",
                wz:"控球后卫",
                num:"11",
                ps:"999"
            },{
                name:"李四",
                wz:"大前锋",
                num:"21",
                ps:"888"
            },{
                name:"王五",
                wz:"小前锋",
                num:"23",
                ps:"777"
            },{
                name:"赵六",
                wz:"中锋",
                num:"10",
                ps:"666"
            },{
                name:"周七",
                wz:"得分后卫",
                num:"1",
                ps:"555"
            }];
            $scope.search="";
            $scope.search2="";
            $scope.$watch("search",function (value) {
                console.log(value);
                if(value.indexOf("枪")!=-1){
                    alert("包含敏感字");
                    $scope.search="";
                }else {
                    $scope.search2=$scope.search;
                }
        });
            $scope.sort="--请选择--";
            $scope.fun=function () {
                if($scope.sort!="--请选择--")
                {
                    if($scope.sort=="--票数倒序--"){
                       $scope.revers=true;
                    }else if($scope.sort=="--票数正序--"){
                        $scope.revers=false;
                    }
                }
            };
            $scope.show=false;
            $scope.add=function () {
                $scope.show=true;
            };
            $scope.push=function () {
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.name==$scope.data[i].name){
                        alert("重复");
                        return;
                    }
                    if($scope.name==null||$scope.wz==null){
                        alert("为空");
                        return;
                    }
                }
           $scope.data.push({name:$scope.name,wz:$scope.wz,num:$scope.num,ps:$scope.ps})
            }
        })
        
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<span>查询</span>
<input type="text" ng-model="search">
<span>排序</span>
<select ng-model="sort" ng-change="fun()">
    <option>--请选择--</option>
    <option>--票数倒序--</option>
    <option>--票数正序--</option>
</select><br>
<button ng-click="add()" class="bt">新增球员</button>
<table>
    <thead>
    <tr>
        <td>姓名</td>
        <td>位置</td>
        <td>球号</td>
        <td>票数</td>
    </tr>
    </thead>
    <tbody>
     <tr ng-repeat="item in data |filter:search2|orderBy:'ps':revers">
         <td>{{item.name}}</td>
         <td>{{item.wz}}</td>
         <td>{{item.num}}</td>
         <td>{{item.ps}}</td>
     </tr>
    </tbody>
</table>
<table ng-show="show">
    <tr>
        <td>姓名</td>
        <td><input type="text" ng-model="name"></td>
    </tr>
    <tr>
        <td>位置</td>
        <td><input type="text" ng-model="wz"></td>
    </tr>
    <tr>
        <td>球号</td>
        <td><input type="text" ng-model="num"></td>
    </tr>
    <tr>
        <td>票数</td>
        <td><input type="text" ng-model="ps"></td>
    </tr>
    <tr>
        <td colspan="2"><button ng-click="push()">添加</button></td>
    </tr>
</table>
</body>
</html>

gh0708

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs实现添加排序

AngularJs实现添加查询排序 Title table{ border-collapse: collapse; } tr,td{ border: 1px solid #000 ; } .bt{ backgro
复制链接

扫一扫