angular.js Bootstrap

最新推荐文章于 2023-06-04 10:21:53 发布

qq_35772936

最新推荐文章于 2023-06-04 10:21:53 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏： angular.js 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/qq_35772936/article/details/84857759

angular.js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在AngularJS应用中集成Twitter Bootstrap，并提供了一个完整的示例。示例展示了如何使用Bootstrap样式和AngularJS指令实现用户数据展示及编辑功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

angular.js Bootstrap 实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.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="lianxi.js"></script>

</body>
</html>

lianxi.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" },
{id:7, fName:'Peters',lName:"Pans" }
];
$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;
  }
};

});

js代码分析：

$scope.fName 模型变量

$scope.edit 用户点击创建用户时设置为true

$scope.error 如果passw1不等于passw2设置为true

$scope.incomplete 字段为空设置为true

$scope.text 验证模型变量的错误和完整性

bootstrap应用到angularjs开发的优缺点：

优点：

　应用视觉效果一致性. 这个其实是很很难的，你希望你的链接、按钮、提醒都有统一的视觉效果，你可以为不同级别的提醒使用不同的颜色
通过多个浏览器测试. 市面上主流的浏览器支持都没问题
　完整的框架解决方案. 这是一个框架，你只需使用它而无需重新制作，这个框架专为 Web 应用设计，所有的元素都可以非常完美的在一起工作，可快速开发。

缺点：

使用自己的css时，这样就变成我必须在同一个系统中使用两套 CSS 预处理器框架来做几乎相同的事情。

bootstrap做响应式只适用于内容和结构不复杂的，PC端和移动端的需求是不一样的，而且因为网站内容很多，所以隐藏的内容也很多，导致速度不佳。