angulajs简单增删改查2

来源：互联网发布：大数据时代财务转型编辑：程序博客网时间：2024/06/08 13:16
<!DOCTYPE html><html ng-app="m" ><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <style>       table tr:nth-child(even){           background-color: gainsboro;       }       /*边框实线*/        table{            border-collapse: collapse;        }    </style>    <script type="text/javascript">        var app = angular.module("m",[]);        app.controller("myctrl",function($scope){            $scope.data = [{                mz:"张三",                wz:"控球后卫",                qh:"11",                ps:"999"            },{                mz:"李四",                wz:"大前锋",                qh:"21",                ps:"888"            },{                mz:"王五",                wz:"小前锋",                qh:"23",                ps:"777"            },{                mz:"赵六",                wz:"中锋",                qh:"10",                ps:"666"            },{                mz:"周七",                wz:"得分后卫",                qh:"1",                ps:"555"            }                ];            //添加数据            $scope.add = function(){                $scope.addUserIsShow = true;            };            //判断必填项            $scope.tijiao=function(){                if ($scope.t_mz == undefined || $scope.t_mz == "") {                    alert("请输入用户名！");                    return;                }                if ($scope.wz == undefined || $scope.wz == "") {                    alert("请输入位置！");                    return;                }                //判重            for(var i = 0;i<$scope.data.length;i++)                if ($scope.data[i].mz==$scope.t_mz) {                    alert("已存在！");                    return;                    $scope.t_mz=="";                }                $scope.data.push({                    mz:$scope.t_mz,                    wz:$scope.wz,                    qh:$scope.qh,                    ps:$scope.ps                });                $scope.t_mz ="";                $scope.wz ="";                $scope.qh ="";                $scope.ps ="";                $scope.addUserIsShow=false;            };            //违规搜索            $scope.searBymz = function(){                for(var i in $scope.data){                    if ($scope.s_mz=="习近平") {                        alert("出现了违规字符");                        $scope.s_mz="";                        return;                    };                }            };        });    </script></head><body ng-controller="myctrl">    <div><span style="font-size: 12px" >查询</span>        <span style="font-size: 12px;margin-left: 180px">排序</span><br>        <input type="text" style="width:200px;height: 15px"  ng-change="searBymz()" ng-model="s_mz">        <select style="width:200px;height: 20px" ng-model="p">            <option value="-">票数倒序</option>            <option value="">票数正序</option>        </select>    </div>    <input type="button" value="新增球员" ng-click="add()"           style="width: 100px;height: 30px; background-color: deepskyblue;"><div>    <table border="1 " style="width: 500px;text-align: center">        <tr style="background-color: darkgrey">            <td>姓名</td>            <td>位置</td>            <td>球号</td>            <td>票数</td>        </tr>        <!--| orderBy:p+'ps' 下拉菜单排序正倒序   |filter:{'mz':s_mz}  名字查询-->        <tr ng-repeat="user in data | orderBy:p+'ps'|filter:{'mz':s_mz}">            <td>{{user.mz}}</td>            <td>{{user.wz}}</td>            <td>{{user.qh}}</td>            <td>{{user.ps}}</td>        </tr>    </table></div>    <div>        <table border="1" style="margin:0 85px;" ng-show="addUserIsShow" class="i">            <tr>                <td>姓名:</td>                <td><input type="text"ng-model="t_mz"></td>            </tr>            <tr>                <td>位置:</td>                <td><input type="text" ng-model="wz"></td>            </tr>            <tr>                <td>球号:</td>                <td><input type="text"ng-model="qh"></td>            </tr>            <tr>                <td>票数:</td>                <td><input type="text" ng-model="ps"></td>            </tr>            <tr>                <td colspan="2" align="center">                    <input type="button" value="提交" ng-click="tijiao()">                </td>            </tr>        </table>    </div></body></html>
阅读全文
1 0