PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > AngularJS教程 > 正文

    AngularJS Bootstrap

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:AngularJSBootstrapAngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。Bootstrap你可以在...

    AngularJS Bootstrap


    AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架。


    Bootstrap

    你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码:
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。

    HTML 代码

    1. <!DOCTYPE html> 
    2. <html> 
    3. <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 
    4. <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    5. <body ng-app="myApp" ng-controller="userCtrl"> 
    6.  
    7. <div class="container"> 
    8.  
    9. <h3>Users</h3> 
    10.  
    11. <table class="table table-striped"> 
    12.   <thead><tr> 
    13.     <th>Edit</th> 
    14.     <th>First Name</th> 
    15.     <th>Last Name</th> 
    16.   </tr></thead> 
    17.   <tbody><tr ng-repeat="user in users"> 
    18.     <td> 
    19.       <button class="btn" ng-click="editUser(user.id)"> 
    20.       <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit 
    21.       </button> 
    22.     </td> 
    23.     <td>{{ user.fName }}</td> 
    24.     <td>{{ user.lName }}</td> 
    25.   </tr></tbody> 
    26. </table> 
    27.  
    28. <hr> 
    29. <button class="btn btn-success" ng-click="editUser('new')"> 
    30.   <span class="glyphicon glyphicon-user"></span> Create New User 
    31. </button> 
    32. <hr> 
    33.  
    34. <h3 ng-show="edit">Create New User:</h3> 
    35. <h3 ng-hide="edit">Edit User:</h3> 
    36.  
    37. <form class="form-horizontal"> 
    38. <div class="form-group"> 
    39.   <label class="col-sm-2 control-label">First Name:</label> 
    40.   <div class="col-sm-10"> 
    41.     <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name"> 
    42.   </div> 
    43. </div>  
    44. <div class="form-group"> 
    45.   <label class="col-sm-2 control-label">Last Name:</label> 
    46.   <div class="col-sm-10"> 
    47.     <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name"> 
    48.   </div> 
    49. </div> 
    50. <div class="form-group"> 
    51.   <label class="col-sm-2 control-label">Password:</label> 
    52.   <div class="col-sm-10"> 
    53.     <input type="password" ng-model="passw1" placeholder="Password"> 
    54.   </div> 
    55. </div> 
    56. <div class="form-group"> 
    57.   <label class="col-sm-2 control-label">Repeat:</label> 
    58.   <div class="col-sm-10"> 
    59.     <input type="password" ng-model="passw2" placeholder="Repeat Password"> 
    60.   </div> 
    61. </div> 
    62. </form> 
    63.  
    64. <hr> 
    65. <button class="btn btn-success" ng-disabled="error || incomplete"> 
    66.   <span class="glyphicon glyphicon-save"></span> Save Changes 
    67. </button> 
    68. </div> 
    69.  
    70. <script src = "myUsers.js"></script> 
    71. </body> 
    72. </html> 

    指令解析

    AngularJS 指令 描述
    <html ng-app 为 <html> 元素定义一个应用(未命名)
    <body ng-controller 为 <body> 元素定义一个控制器
    <tr ng-repeat 循环 users 对象数组,每个 user 对象放在 <tr> 元素中。
    <button ng-click 当点击 <button> 元素时调用函数 editUser()
    <h3 ng-show 如果 edit = true 显示 <h3> 元素
    <h3 ng-hide 如果 edit = true 隐藏 <h3> 元素
    <input ng-model 为应用程序绑定 <input> 元素
    <button ng-disabled 如果发生错误或者 ncomplete = true 禁用 <button> 元素

     


    Bootstrap 类解析

    元素 Bootstrap 类 定义
    <div> container 内容容器
    <table> table 表格
    <table> table-striped 带条纹背景的表格
    <button> btn 按钮
    <button> btn-success 成功按钮
    <span> glyphicon 字形图标
    <span> glyphicon-pencil 铅笔图标
    <span> glyphicon-user 用户图标
    <span> glyphicon-save 保存图标
    <form> form-horizontal 水平表格
    <div> form-group 表单组
    <label> control-label 控制器标签
    <label> col-sm-2 跨越 2 列
    <div> col-sm-10 跨越 10 列
     

    JavaScript 代码

    myUsers.js

    1. angular.module('myApp', []).controller('userCtrl'function($scope) { 
    2. $scope.fName = ''
    3. $scope.lName = ''
    4. $scope.passw1 = ''
    5. $scope.passw2 = ''
    6. $scope.users = [ 
    7. {id:1, fName:'Hege', lName:"Pege" }, 
    8. {id:2, fName:'Kim',  lName:"Pim" }, 
    9. {id:3, fName:'Sal',  lName:"Smith" }, 
    10. {id:4, fName:'Jack', lName:"Jones" }, 
    11. {id:5, fName:'John', lName:"Doe" }, 
    12. {id:6, fName:'Peter',lName:"Pan" } 
    13. ]; 
    14. $scope.edit = true
    15. $scope.error = false
    16. $scope.incomplete = false;  
    17.  
    18. $scope.editUser = function(id) { 
    19.   if (id == 'new') { 
    20.     $scope.edit = true
    21.     $scope.incomplete = true
    22.     $scope.fName = ''
    23.     $scope.lName = ''
    24.     } else { 
    25.     $scope.edit = false
    26.     $scope.fName = $scope.users[id-1].fName; 
    27.     $scope.lName = $scope.users[id-1].lName;  
    28.   } 
    29. }; 
    30.  
    31. $scope.$watch('passw1',function() {$scope.test();}); 
    32. $scope.$watch('passw2',function() {$scope.test();}); 
    33. $scope.$watch('fName'function() {$scope.test();}); 
    34. $scope.$watch('lName'function() {$scope.test();}); 
    35.  
    36. $scope.test = function() { 
    37.   if ($scope.passw1 !== $scope.passw2) { 
    38.     $scope.error = true
    39.     } else { 
    40.     $scope.error = false
    41.   } 
    42.   $scope.incomplete = false
    43.   if ($scope.edit && (!$scope.fName.length || 
    44.   !$scope.lName.length || 
    45.   !$scope.passw1.length || !$scope.passw2.length)) { 
    46.      $scope.incomplete = true
    47.   } 
    48. }; 
    49.  
    50. }); 

    JavaScript 代码解析

     

    Scope 属性 用途
    $scope.fName 模型变量 (用户名)
    $scope.lName 模型变量 (用户姓)
    $scope.passw1 模型变量 (用户密码 1)
    $scope.passw2 模型变量 (用户密码 2)
    $scope.users 模型变量 (用户的数组)
    $scope.edit 当用户点击创建用户时设置为true。
    $scope.error 如果 passw1 不等于 passw2 设置为 true
    $scope.incomplete 如果每个字段都为空(length = 0)设置为 true
    $scope.editUser 设置模型变量
    $scope.watch 监控模型变量
    $scope.test 验证模型变量的错误和完整性

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-152-3448-1.html
    相关热词搜索:
    上一篇:AngularJS API
    下一篇:AngularJS 包含