文件名称：angularjs邮箱登陆特效
文件大小：36KB
文件格式：DOC
更新时间：2017-11-30 07:24:42
angularjs
< DOCTYPE html> <html ang app ""> <head> < <link rel "stylesheet" href "http: apps bdimg com libs bootstrap 3 2 0 css bootstrap min css"> > < head> <body ng controller "userController"> <div class "container"> <h3>Users< h3> <table class "table table striped"> <thead><tr> <th>Edit< th> <th>First Name< th> <th>Last Name< 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> Edit > < 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> Create New User < button> <hr> <h3 ng show "edit">Create New User:< h3> <h3 ng hide "edit">Edit User:< h3> <form class "form horizontal"> <div class "form group size13"> <label style "float:left" class "col sm 2 control label">Email地址:< label> <div class "col sm 10"> <input style "height: 30px;width: 330px;" type "text" ng model "fName" > < div> < div> <div class "form group"> <label style "float:left" class "col sm 2 control label">Last Name:< label> <div class "col sm 10"> <input style "height: 30px;width: 330px;" type "text" ng model "lName" placeholder "Last Name"> < div> < div> <div class "form group"> <label style "float:left" class "col sm 2 control label">Password:< label> <div class "col sm 10"> <input style "height: 30px;width: 330px;" type "password" ng model "passw1" placeholder "Password"> < div> < div> <div class "form group"> <label style "float:left" class "col sm 2 control label">Repeat:< label> <div class "col sm 10"> <input style "height: 30px;width: 330px;" class "size14 "type "password" ng model "passw2" placeholder "Repeat Password"> < div> < div> < form> <hr> <div> <button class "btn btn success" ng disabled "error || incomplete"> 更新 < button> < div> <script src "http: apps bdimg com libs angular js 1 2 15 angular min js">< script> <script src "myUsers js"> function userController $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 passw1 length || $scope passw2 length { $scope incomplete true; } }; } < script> < body> < html>>">< DOCTYPE html> <html ang app ""> <head> < <link rel "stylesheet" href "http: apps bdimg com libs bootstrap 3 2 0 css bootstrap min css"> > < head> <body ng controller "userController"> <div class "con [更多]