AngularJS快速入門指南16：Bootstrap

時間 2019-11-20

標籤 angularjs 快速入門指南 bootstrap 欄目 AngularJS 简体版

原文原文鏈接

　　Bootstrap是一套很是流行的樣式表框架，本章用以演示如何在AngularJS中使用它。css

Bootstrap

　　爲了在AngularJS application中使用Bootstrap，你須要將下面這行代碼加入到頁面的head部分（或者去Bootstrap官網下載包而後引用到頁面上）：html

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

　　查看Bootstrap中文官網以瞭解更多有關http://www.bootcss.com/angularjs

　　下面是一個完整的HTML示例，並附有AngularJS指令和Bootstrap類的說明。ajax

HTML代碼

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</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>&nbsp;&nbsp;Edit
      </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> Create New User
</button>
<hr>

<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div> 
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
</div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
  <span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>

<script src = "myUsers.js"></script>
</body>
</html>

運行bootstrap

上例中出現的AngularJS指令解釋

AngularJS指令	描述
<body ng-app	將<body>元素定義爲AngularJS application的根元素。
<body ng-controller	在<body>元素中指定一個控制器。
<tr ng-repeat	對users對象的每個子項都建立一個<tr>元素。
<button ng-click	當<button>元素被點擊時，調用editUser()函數。
<h3 ng-show	當edit = true時顯示<h3>元素。
<h3 ng-hide	當edit = true時隱藏<h3>元素。
<input ng-model	將<input>標籤綁定到application。
<button ng-disabled	當出現錯誤或者incomplete = true時禁用<button>標籤。

Bootstrap類解釋

元素	Bootstrap類	定義
<div>	container	定義內容的容器。
<table>	table	定義一個表格。
<table>	table-striped	定義一個帶有striped樣式的表格，即奇數行和偶數行的背景色不一樣。
<button>	btn	定義一個按鈕。
<button>	btn-success	定義一個帶有success樣式的按鈕。
<span>	glyphicon	定義一個glyph樣式的圖標。
<span>	glyphicon-pencil	定義一個pencil樣式的圖標。
<span>	glyphicon-user	定義一個user樣式的圖標。
<span>	glyphicon-save	定義一個save樣式的圖標。
<form>	form-horizontal	定義一個horizontal樣式的表單。
<div>	form-group	定義一組控件。
<label>	control-label	定義一個label控件。
<label>	col-sm-2	定義一個具備兩列的span。
<div>	col-sm-10	定義一個具備10列的span。

JavaScript代碼

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代碼解釋

Scope對象的屬性	做用
$scope.fName	模型變量（用戶first name）。
$scope.lName	模型變量（用戶last name）。
$scope.passw1	模型變量（用戶password 1）。
$scope.passw2	模型變量（用戶password 2）。
$scope.users	模型變量（用戶對象的數組）。
$scope.edit	當點擊按鈕建立一個用戶時將該變量設置爲true。
$scope.error	當passw1不等於passw2時值爲true。
$scope.incomplete	當field中的內容爲空時（即length = 0）值爲true。
$scope.editUser	修改模型數據。
$scope.watch	監視模型數據（例如判斷passw1是否等於passw2）。
$scope.test	進行數據驗證，而後設置$scope.error和$scope.incomplete的值。