kangshuai
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)" >
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser(\'new\')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

<script src="test.js"></script>

</body>
</html>
var app=angular.module(\'myApp\',[]);
app.controller(\'userCtrl\',function($scope){
       $scope.fName=\'\';
       $scope.lName=\'\';
       $scope.passw1=\'\';
       $scope.passw2=\'\';        
       $scope.users=[
          {id:1,fName:\'Hege\',lName:\'Pege\'},
          {id:2,fName:\'Kim\',lName:\'Pim\'},
          {id:3,fName:\'Sal\',lName:\'Smith\'},
          {id:4,fName:\'Jack\',lName:\'Jones\'},
          {id:5,fName:\'John\',lName:\'Doe\'},
          {id:6,fName:\'Peter\',lName:\'Pan\'},
       ];
       $scope.edit=true;
       $scope.error=false;
       $scope.incomplete=false;
       $scope.editUser=function(id){
             if(id==\'new\'){
                $scope.edit=true;
                $scope.incomplete=true;
                $scope.fName=\'\';
                $scope.lName=\'\';
             }else{
                 $scope.edit=false;
                 $scope.fName=$scope.users[id-1].fName;
                 $scope.lName=$scope.users[id-1].lName;
             }
       };
       $scope.$watch(\'passw1\',function(){
             $scope.test();
       });
         $scope.$watch(\'passw2\',function(){
             $scope.test();
       }); 
        $scope.$watch(\'fName\',function(){
             $scope.test();
       }); 
        $scope.$watch(\'lName\',function(){
             $scope.test();
       });
      $scope.test=function(){
           if($scope.passw1!==$scope.passw2){
                $scope.error=true;
           }else{
                 $scope.error=false;
           } 
           $scope.incomplete=false;
           if($scope.edit&&(!$scope.fName.length)||!$scope.lName.length||
               !$scope.lName.length||!$scope.passw1.length||!$scope.passw2.length
               ){
               $scope.incomplete=true;
           }      
      }
        


});

分类:

技术点:

相关文章: