AngularJs路由与添加用户(2)

来源：互联网发布：网络销售具体做什么编辑：程序博客网时间：2024/05/01 00:49
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="angularjs/angular.js" ></script><script type="text/javascript" src="angularjs/angular-route.js" ></script><script>var app=angular.module("myApp",["ngRoute"]);app.config(["$routeProvider",function($routeProvider){                $routeProvider                              .when("/addUser",{                    templateUrl:"addUser.html",                    controller:"addUserCtrl"                })                       }]);app.controller("myCtrl",function($scope,$location){$scope.users = [{"name":"张三","pwd":"后卫","age":11,"sex":"999","state":false},{"name":"李四","pwd":"大前锋","age":21,"sex":"888","state":false},{"name":"王五","pwd":"小前锋","age":23,"sex":"777","state":false}];$scope.goToUrl = function(url){                        $location.path(url);                };});app.controller("addUserCtrl",function($scope){                    $scope.a = "";            $scope.b = "";            $scope.c = "";            $scope.d = "";                                //提交按钮的点击事件            $scope.tijiao = function(){                var flag = true;                //拿到各个输入框的值                if($scope.a==""||$scope.a==null){                    alert("姓名不能为空");                    flag = false;                }                if($scope.b==""||$scope.b==null){                    alert("位置不能为空");                    flag = false;                }                if($scope.c==""||$scope.c==null){                    alert("球号不能为空");                    flag = false;                }                if($scope.d==""||$scope.d==null){                    alert("票数不能为空");                    flag = false;                }                                             if(flag){                               $scope.duixiang ={                    name:$scope.a,                    pwd:$scope.b,                    age:$scope.c,                    sex:$scope.d,                    state:false                };                $scope.users.push($scope.duixiang);                }            };                        });                </script><script></script></head> <body ng-app="myApp" ng-controller="myCtrl"><div><p>查询</p>  <input type="text" ng-model="yhmchaxun" size="28"/>  </div>  <div style="width:800px;height:800px;float:right ; margin-top: -75px;"><p>排序</p>   <select ng-model="b">      <option value="">升序</option>     <option value="-">降序</option>    </select> </div> <br /><button ng-click="goToUrl('/addUser')" style=" background:blue;">新增成员</button><br /><br /> <div><table border="1" cellspacing="1" cellpadding="10"><thead><tr><th>姓名</th><th>位置</th><th>球号</th><th>票数</th></tr></thead><tbody><tr ng-repeat="user in users|filter:{name:yhmchaxun}|orderBy:b+a"><td>{{user.name }}</td><td>{{user.pwd}}</td><td>{{user.age }}</td><td>{{user.sex}}</td></tr></tbody></table></div><br />        <br />         <div ng-view="">                   </div>          <script type="text/ng-template" id="addUser.html">    <table border="1" cellpadding="10" cellspacing="1">                <tbody>                    <tr>                        <th>姓名:</th>            <td><input type="text" ng-model="a"></td>                    </tr>                    <tr>                        <th>位置:</th>            <td><input type="text" ng-model="b"></td>                    </tr>                    <tr>                        <th>球号:</th>            <td><input type="text" ng-model="c"></td>                    </tr>                    <tr>                        <th>票数:</th>            <td><input type="text" ng-model="d"></td>                    </tr>                                        <tr>                                          <tr align="center">                        <td colspan="2">        <input type="button" value="提交" ng-click="tijiao()" />                        </td>                    </tr>                </tbody>            </table>            </script>        <br /></body></html>
阅读全文
0 0