AngularJS Bootstrap详细介绍及实例代码

Bootstrap 2019-01-01

AngularJS Bootstrap

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

Bootstrap

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

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

以下是一个完整的 HTML 实例,使用了 AngularJS 指令和 Bootstrap 类。

HTML 代码

rush:js;"> <Meta charset="utf-8"> <div class="container">

Users

编辑名姓编辑 <button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user">创建新用户

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

disabled="!edit" placeholder="姓">

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

运行结果：

指令解析

AngularJS 指令元素定义一个应用(未命名) 元素定义一个控制器元素时调用函数 editUser()显示

元素元素元素disabled错误或者 ncomplete = true 禁用

描述

元素内容容器用户图标标签

JavaScript 代码

myUsers.js

rush:js;"> angular.module('myApp',[]).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.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};

});

JavaScript 代码解析

Bootstrap 类	定义

Scope 属性 cope.fName用户名)cope.lName用户姓)cope.passw1用户密码 1)cope.passw2用户密码 2)cope.users用户的数组)cope.edit用户点击创建用户时设置为true。cope.errorcope.incompletecope.editUsercope.watchcope.test错误和完整性

以上就是对AngularJS Bootstrap 资料的整理，后续继续补充，希望能帮助编程AngularJS的同学。

Bootstrap实例代码 Bootstrap资料

Bootstrip HTML 查询搜索常用格式模版

Bootstrip HTML 查询搜索常用格式模版 <form class=&...

如何在按钮上加红色数字

如何在按钮上加红色数字您可以使用Bootstrap的badge组件来在...

让两个按钮左右排列

要让两个按钮左右排列，你可以使用 Bootstrap 的网格系统将它...

status能否设置为布尔值类型，前端采用复选框形式

是的，可以将status设置为布尔类型，这样可以在前端使用复选...

Bootstrap 按钮总结

前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...

Python学习-day52-bootstrap

起步导入：<linkrel="stylesheet"href="b...

用途

AngularJS Bootstrap详细介绍及实例代码