AngularJS Bootstrap · AngularJs教程

AngularJS Bootstrap

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

查看 Bootstrap教程。

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 元素中添加如下代码:

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：
以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。
HTML 代码
  
  
  
  
  

  
  

Users  

  
    
    Edit  
    First Name  
    Last Name  
    
    
      
        
        Edit  
        
      
    {{ user.fName }}  
    {{ user.lName }}  
    
  

  
  
   Create New User  
  
  

Create New User:  
Edit User:  

  

  
  
   Save Changes  
  
  

  
  
  
>
指令解析



AngularJS 指令
描述




html ng-app
为 元素定义一个应用(未命名)


body ng-controller
为  元素定义一个控制器


tr ng-repeat
循环 users 对象数组，每个 user 对象放在  元素中。


button ng-click
当点击  元素时调用函数 editUser()


p ng-show
如果 edit = true 显示  元素


p ng-hide
如果 edit = true 隐藏  元素


input ng-model
为应用程序绑定  元素


button ng-disabled
如果发生错误或者 ncomplete = true 禁用  元素



Bootstrap 类解析



元素
Bootstrap 类
定义





container
内容容器



table
表格



table-striped
带条纹背景的表格



btn
按钮



btn-success
成功按钮



glyphicon
字形图标



glyphicon-pencil
铅笔图标



glyphicon-user
用户图标



glyphicon-save
保存图标



form-horizontal
水平表格



form-group
表单组



control-label
控制器标签



col-sm-2
跨越 2 列



col-sm-10
跨越 10 列



Javascript 代码
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;  
  }  
};  

}
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
验证模型变量的错误和完整性




                                
                                					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/3013195.html