angularjs路由、添加元素

来源：互联网发布：点评管家淘宝店铺编辑：程序博客网时间：2024/04/30 23:01
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: auto;            padding: 0;        }        body{            text-align: center;            margin: 50px auto;        }        table        {            margin-top: 30px;        }        .btn        {            background: cornflowerblue;            width: 100px;            height: 50px;        }        tr:nth-child(2n){            background: #666;        }    </style>    <script src="js/angular.js"></script>    <script>        //主模板        var myapp=angular.module("myapp",[]);        //控制器        myapp.controller("myCtrl",function ($scope) {            $scope.data=[                {name:"张三",wei:"控球后卫",hao:"11",piao:"999"},                {name:"李四",wei:"大前锋",hao:"21",piao:"888"},                {name:"王五",wei:"小前锋",hao:"23",piao:"777"},                {name:"赵六",wei:"中锋",hao:"10",piao:"666"},                {name:"周七",wei:"得分后卫",hao:"1",piao:"555"},            ]            $scope.name="";            $scope.search2="";           $scope.$watch("name",function (value) {                if(value.indexOf("枪")!=-1)                {                    alert("含有敏感字!!!");                    $scope.name="";                }                else                {                    $scope.search2=$scope.name;                }           })            $scope.order="-请选择-";            //排序            $scope.pai=function () {                if( $scope.order!="-请选择-")                {                    if( $scope.order=="票数正叙")                    {                        console.log("0");                        return false;                    }                    else                    {                        return true;                    }                }                return false;            }            //添加球员            $scope.show=false;            $scope.add=function () {                $scope.show=true;            }            $scope.uname="";            $scope.uwei="";            $scope.uhao="";            $scope.upiao="";            $scope.adduser=function () {                if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="")                {                    alert("此项为必填项");                }                else                {                    for(var i=0;i<$scope.data.length;i++)                    {                        if($scope.data[i].name==$scope.uname)                        {                            alert("此球员已存在");                            $scope.uname="";                            $scope.uwei="";                            $scope.uhao="";                            $scope.upiao="";                            break;                        }                        else if(i==$scope.data.length-1)                        {                            $scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao});                            $scope.uname="";                            $scope.uwei="";                            $scope.uhao="";                            $scope.upiao="";                            $scope.show=false;                            break;                        }                    }                }            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl">查询:<input type="text" ng-model="name">排序:<select ng-model="order">     <option>-请选择-</option>     <option>票数倒叙</option>     <option>票数正叙</option></select><br><button ng-click="add()" class="btn">添加球员</button><table border="1px soilde #000" width="400px">     <tr>         <th>姓名</th>         <th>位置</th>         <th>球号</th>         <th>票数</th>     </tr>    <tr ng-repeat="item in data|filter:search2|orderBy:'piao':pai()">        <td>{{item.name}}</td>        <td>{{item.wei}}</td>        <td>{{item.hao}}</td>        <td>{{item.piao}}</td>    </tr></table>  <table border="1px solide #000" ng-show="show">      <tr>          <td>姓名:</td>          <td><input type="text" ng-model="uname"></td>      </tr>      <tr>          <td>位置:</td>          <td><input type="text" ng-model="uwei"></td>      </tr>      <tr>          <td>球号:</td>          <td><input type="text" ng-model="uhao"></td>      </tr>      <tr>          <td>票数:</td>          <td><input type="text" ng-model="upiao"></td>      </tr>      <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr>  </table></body></html>
阅读全文
0 0