angularjs路由、排序、查询

来源：互联网发布：阿里云代理加盟编辑：程序博客网时间：2024/06/01 21:04
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>周考3球员信息</title>    <script  type="text/javascript" src="js/angular.js"></script>    <style>        * {            margin: 0;            padding: 0;        }        table {            margin-top: 20px;            border-collapse: collapse;        }        td, th {            border: 1px solid #000;            padding: 20px;            text-align: center;        }        button {            border-radius: 5px;            border: 1px solid gainsboro;            background-color: orange;            color: white;            padding: 5px;        }        span {            width: 100px;            display: inline-block;        }        .age {            width: 20px;            height: 20px;        }    </style>    <script>        var myapp = angular.module("myapp", []);        myapp.controller("myCtrl", function ($scope) {            var data = [{"name": "张三", "pass": '控场后卫', "age": 11, "sex": 999, "check": false},                {"name": "李四", "pass": '大前锋', "age": 21, "sex": 888, "check": false},                {"name": "王五", "pass": '小前锋', "age": 23, "sex": 777, "check": false},                {"name": "赵六", "pass": '中锋', "age": 10, "sex": 666, "check": false},                {"name": "周七", "pass": '得分后卫', "age": 1, "sex": 777, "check": false}                        ];              data.predicate = '-age';//根据年龄倒叙            $scope.data = data;            //用来查询的字段            $scope.cxSearch;            $scope.cx = function (ziduan) {                console.log(ziduan);                console.log($scope.select);                $scope.cxSearch = ziduan;            }            //查询的方法            $scope.searchFifter = function (search) {                if ($scope.name != null || $scope.select != null || ($scope.startAge != null || $scope.endAge != null)) {                    if ($scope.cxSearch == "name") {                        if (search.name.indexOf($scope.name) != -1) {                            return true;                        } else {                            return false;                        }                    } else if ($scope.cxSearch == "select") {                        if (search.sex.indexOf($scope.select) != -1) {                            return true;                        } else {                            return false;                        }                    } else if ($scope.cxSearch == "age") {                        if ($scope.startAge < parseInt(search.age) && parseInt(search.age) < $scope.endAge || $scope.startAge == search.age || $scope.endAge == search.age) {                            return true;                        } else {                            return false;                        }                    }                }                return true;            };            $scope.addshow = false;            //添加用户的方法            $scope.add = function () {                $scope.addshow = true;            }            $scope.submitAdd = function () {                if ($scope.addname == null || $scope.addpass == null || $scope.addage == null || $scope.addsex == null) {                    alert("用户信息不可为空");                } else {                    $scope.data.push({                        "name": $scope.addname,                        "pass": $scope.addpass,                        "age": $scope.addage,                        "sex": $scope.addsex,                        "check": false                    });                    alert("提交成功");                    $scope.addshow = false;                }            }        });    </script></head><body ng-app="myapp" ng-controller="myCtrl" bgcolor="cadetblue" ><center><tr><td ><font color="maroon">查询</td>                                               <td>排序</td></tr><br /><input type="text"ng-model="name" ng-click="cx('name')"/>            <select ng-model="select"  ng-click="cx('select')">    <option>票数倒叙</option>    <option>票数正叙</option></select><br /><button style="margin-top: 20px" ng-click="add()">新增球员</button><table bgcolor="blueviolet">    <thead bgcolor="chocolate">    <th>姓名</th>    <th>位置</th>    <th>球号</th>    <th>票数</th>    </thead>    <tbody>    <tr ng-repeat="item in data | filter:searchFifter:search" ng-repeat="item in data.age|orderBy:data.predicate">                <td >{{item.name}}</td>        <td >{{item.pass}}</td>        <td >{{item.age}}</td>        <td >{{item.sex}}</td>    </tr>    </tbody></table><br><div ng-show="addshow">    <span>姓名:</span> <input type="text" ng-model="addname"><br>    <span>位置:</span><input type="text" ng-model="addpass"><br>    <span>球号:</span><input type="text" ng-model="addage"><br>    <span>票数:</span><input type="text" ng-model="addsex"><br>    <button style="margin-top: 30px" ng-click="submitAdd()">确认</button></div></center></body></html>
阅读全文
0 0