AngularJS ブートストラップ

AngularJS で推奨されるスタイルシートは Twitter Bootstrap です。Twitter Bootstrap は現在最も人気のあるフロントエンドフレームワークです。

ブートストラップチュートリアルを確認してください。

Bootstrap

Twitter Bootstrap を AngularJS アプリケーションに追加できます。次のコードを <head> 要素に追加できます:

サイトが中国にある場合は、Baidu 静的リソースライブラリの Bootstrap を使用することをお勧めします。コードは次のとおりです:

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

以下は、AngularJS ディレクティブを使用した完全な HTML の例です。そしてブートストラップクラス。

HTMLコード

例

<!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>

サンプルを実行する»

オンラインサンプルを表示するには、「サンプルを実行」ボタンをクリックしてください

命令分析

AngularJS ディレクティブ	説明
<html ng-app	は、<html>要素のアプリケーション(名前なし)を定義します
<body ng-controller	は、<body>要素のコントローラを定義します
<tr ng-repeat	は、ユーザーオブジェクト配列をループし、各ユーザーオブジェクトは <tr> 要素に配置されます。
<button ng-click	<button> 要素がクリックされると関数 editUser() が呼び出されます
<h3 ng-show	edit = true の場合、<h3> が表示されます。 element
<h3 ng-hide	edit = true の場合に <h3> 要素を非表示にする
<input ng-model	アプリケーションの <input> 要素をバインドする
<button ng-disabled	エラーが発生した場合、または ncomplete = true の場合、<button> 要素を無効にします

ブートストラップクラス分析

<ボタン>b tn-success成功ボタン<スパン>グリフィコングリフアイコン<スパン>グリフィコン鉛筆鉛筆アイコン<スパン> グリフィコンユーザーユーザーアイコン<span>glyphicon-savesave-icon<form>form-horizontalhorizontal form<div> フォーム - グループフォームグループ<label><label>< div>

JavaScript代

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'ヘゲ', lName:"ペゲ" },
{id:2, fName:'キム', lName: 「ピム」 },
{id:3, fName:「サル」, lName:「スミス」 },
{id:4, fName:「ジャック」, lName: "ジョーンズ" },
{id:5, fName:'ジョン', lName:"ドウ" },
{id:6, fName:'ピーター',lName: 「パン」 }
];
$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コード分析

要素	ブートストラップクラス	定義
<div>	コンテナ	コンテンツコンテナ
<テーブル>	テーブル	テーブル
<テーブル>	テーブルストライプ	ストライプの背景付きテーブル
<ボタン>	btn	ボタン







control-label	controller-label
col-sm-2	2列にわたる
col- sm -10	10 列全体

性スコープ属性 o $scope.fname モデル変数(ユーザー名) $scope.lname モデル変数(ユーザー名) $scope.passw1 モデル変数(ユーザーパスワード1)$scope.passw2モデル変数(ユーザーパスワード2)$scope.usersモデル変数(ユーザーの配列)$scope.edit ユーザーがクリックするとtrueに設定されますユーザーを作成します。 $scope.error passw1 が passw2 と等しくない場合は true に設定します$scope.incompleteすべてのフィールドが空 (長さ = 0) の場合は true に設定します$scope。 editUserモデル変数を設定$scope.watchモデル変数を監視$scope.testモデル変数のエラーと整合性を検証

← AngularJS API

AngularJS には以下が含まれます →

提出する

PHP中国語ウェブサイト