W3xue
Tools
让人人享有平等学习机会
案例：
AngularJS案例
状态：可编辑再运行
进入竖版
运行结果
本设备
Galaxy S5
Nexus 5X
Nexus 6P
iPhone7
iPhone7 Plus
iPhone8
iPhone8 Plus
iPhoneX
iPad
iPad Pro
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css"> <script src="/js/angular.js1.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="/js/angular.js1.4.6/myUsers.js"></script> </body> </html>
W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。部分案例需要特定浏览器支持，如案例没有显示效果，请尝试更换浏览器。
意见反馈
友情链接：
直通硅谷
点职佳
北美留学生论坛