AngularJS Bootstrap


Lembaran gaya pilihan untuk AngularJS ialah Twitter Bootstrap Twitter Bootstrap ialah rangka kerja bahagian hadapan yang paling popular.

Lihat tutorial Bootstrap.

Bootstrap

Anda boleh menambah Twitter Bootstrap pada aplikasi AngularJS anda Anda boleh menambah kod berikut pada elemen <head> anda:

< ;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Jika tapak berada di China , adalah disyorkan untuk menggunakan Bootstrap pustaka sumber statik Baidu, kodnya adalah seperti berikut:

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

Berikut ialah contoh HTML lengkap, menggunakan arahan AngularJS dan kelas Bootstrap.


Kod HTML

Contoh

<!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="http://apps.bdimg.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="myUsers.js"></script>

</body>
</html>

Contoh Jalankan »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian


Analisis Arahan

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> 元素

Analisis kelas 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

angular.module('myApp', []).controller('userCtrl',   fungsi($scope) {
$scope.fName = '';
$skop.lNama = '';
$skop.passw1 = '';
$skop. passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lNama:"Pege" },
{id :2, fNama:'Kim',  lNama:"Pim" },
{id:3, fName: 'Sal',  lNama:"Smith" },
{id:4, fNama:'Jack', lNama :"Jones" },
{id:5, fNama:'John', lNama:"Doe" } ,
{id:6, fNama:'Peter',lNama:"Pan" }
];
$skop. edit = benar;
$scope.error = false;
$scope.incomplete = false;

$scope.editUser = fungsi(id) {
  jika (id == 'baharu') {
    $scope.edit = benar;
    $skop.tidak lengkap = benar;
    $scope.fName = '';
    $scope.lName = '';
    } lain {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName;
  }
};

$skop.$watch('passw1',fungsi() {$scope.test();});
$scope.$watch('passw2',fungsi() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', fungsi() {$scope.test();});

$scope.test = function() {
  jika ($scope.passw1 !== $scope.passw2) {
    $scope.error = benar;
    } lain {
    $scope.error = salah;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
  !$scope.lName.length ||
  !$scope.passw1.length || !$scope.passw2.length)) {
     $scope.incomplete = benar;
  }
};

});

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