用户添加

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title></title>
      <script src="jquery-2.1.0.js" type="text/javascript"></script>
      <script src="angular.js" type="text/javascript"></script>
      <script src="angular-route.js" type="text/javascript"></script>
      <script type="text/javascript">
         var app=angular.module("myapp",["ngRoute"]);
         var user=[{"id":"1","name":"张三","pwd":"111","age":"20","sex":"男"},
         {"id":"2","name":"李四","pwd":"222","age":"21","sex":"女"},
         {"id":"3","name":"王五","pwd":"333","age":"22","sex":"男"}];
         app.value("user",user);
         app.config(["$routeProvider",function($routeProvider){
            $routeProvider
            .when("/up",{
               controller:"myctrl",
               templateUrl:"up.html"})
            .when("/add",{
               controller:"myctrl",
               templateUrl:"add.html"
            });
         }]);
         app.controller("myctrl",function($scope,user,$location){
            $scope.user=user;
            $scope.del=function(){
               $scope.user.splice($scope.user);
            };
            $scope.goToUrl=function(path){
               $location.path(path);
            };
            $scope.goTourl=function(path){
               $location.path(path);
            };
            $scope.dd=function(){
               var usernew={id:$scope.id,
               name:$scope.name,
               pwd:$scope.pwd,
               age:$scope.age,
               sex:$scope.sex};
               $scope.user.push(usernew);
            };
            var ii=0;
            $scope.upp=function($index){
               $scope.newpwdd=$scope.user[$index].pwd;
               $scope.newname=$scope.user[$index].name;
               ii=$index;
            };
            $scope.gmm=function(){
               $scope.user[ii].pwd=$scope.newpwd;
            };
         });
      </script>
      <style>
         .header{
            width: 700px;
            height: 50px;
         }
         .name{
            margin-top: 10px;
         }
         .age{
            margin-top: 10px;
         }
         .sex{
            margin-top: 10px;
         }
         .add{
            margin-top: 20px;
         }
      </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
      <center>
      <div class="header">
         用户名:<input type="text" class="name" ng-model="search" />
         年龄：<input type="text" class="age" ng-model="searchone" />
         性别：<select class="sex" ng-model="searchtwo">
            <option></option>
            <option>男</option>
            <option>女</option>
         </select>
         <button ng-click="del()">全部删除</button>
      </div>
      <table border="1" cellpadding="20" cellspacing="0">
         <tr>
            <th>id</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
         </tr>
         <tr ng-repeat="u in user | filter:{'name':search} | filter:{'age':searchone} | filter:{'sex':searchtwo}">
            <td>{{u.id}}</td>
            <td>{{u.name}}</td>
            <td>{{u.pwd}}</td>
            <td>{{u.age}}</td>
            <td>{{u.sex}}</td>
            <td>
               <button ng-click="goToUrl('/up');upp($index)" >修改密码</button>
            </td>
         </tr>
      </table>
      <button class="add" ng-click="goTourl('/add')">添加用户</button>
      <script type="text/ng-template" id="up.html">
         <form action="#">
            <table>
               <tr>
                  <td>用户名: </td>
                  <td><input type="text" ng-model="newname" /></td>
               </tr>
               <tr>
                  <td>旧密码: </td>
                  <td><input type="text" ng-model="newpwdd" /></td>
               </tr>
               <tr>
                  <td>新密码:</td>
                  <td><input type="text" ng-model="newpwd"  /></td>
               </tr>
               <tr>
                  <td>确认密码:</td>
                  <td><input type="text" /></td>
               </tr>
               <tr>
                  <td colspan="2" align="center">
                     <input type="button" ng-click="gmm()" value="提交" />
                  </td>
               </tr>
            </table>
         </form>
      </script>
      <script type="text/ng-template" id="add.html">
         <form action="#">
            <table>
               <tr>
                  <td>id:</td>
                  <td><input type="text" ng-model="id" /></td>
               </tr>
               <tr>
                  <td>用户名:</td>
                  <td> <input type="text" ng-model="name" /></td>
               </tr>
               <tr>
                  <td>密码:</td>
                  <td><input type="text" ng-model="pwd" /></td>
               </tr>
               <tr>
                  <td>年龄:</td>
                  <td><input type="text" ng-model="age" /></td>
               </tr>
               <tr>
                  <td>性别:</td>
                  <td><input type="text" ng-model="sex" /><br /></td>
               </tr>
               <tr>
                  <td colspan="2" align="center"><input type="button" ng-click="dd()" value="提交" /></td>
               </tr>
            </table>
         </form>
      </script>
      <div ng-view>
         
      </div>
      </center>
   </body>
</html>