AngularJSブートストラップ

前：AngularJSの入力の検証

次へ：AngularJSは含まれてい

AngularJS優先スタイルシートは、Twitterのブートストラップは、最も人気のあるフロントエンドのフレームワークであり、Twitterのブートストラップです。

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

ブートストラップ

：あなたはTwitterのブートストラップあなたのAngularJSのアプリケーションに参加することができ、あなたはあなたの<head>に以下のコード要素を追加することができます

<リンクのrel = "スタイルシート"のhref = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

国のサイトならば、Baiduの静的リポジトリのブートストラップ、次のコードを使用することをお勧めします。

以下は、AngularJSとブートストラップクラスの命令を使用して、完全なHTMLの例です。

HTMLコード

<！DOCTYPE HTML>
<HTML>
<リンクのrel = "スタイルシート"のhref = "http://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"> </スクリプト>
<ボディngのアプリ= "て、myApp " NG-コントローラ= "userCtrl">

<DIVクラス = "コンテナ">

<H3>ユーザー</ H3>

<Tableクラス= "テーブルには、卓上ストライプ">
<THEAD> <TR>
<Thの>編集</目>
<Thの>姓</目 >
<Thの>姓</目 >
</ TR> </ thead要素>
<TBODY> <TR-リピートngの「ユーザーがユーザーを"=>
<TD>
<Buttonクラス= "btnの" NG +クリック= "editUser（user.id）">
<スパンクラス= "glyphicon glyphicon-鉛筆"> </ span>の＆NBSP;＆NBSP;編集
</ボタン>
</ TD>
<TD> {{user.fName}} </ TD>
<TD> {{user.lName}} </ TD>
</ TR> </ TBODY>
</表>

<HR>
<Buttonクラス= "btn- BTN成功」NGクリック=" editUser（ '新'） ">
<スパンクラス= "glyphicon glyphicon-ユーザー"> </ span>の新規作成ユーザー
</ボタン>
<HR>

<H3のNG-ショー= "編集 ">新しいユーザーを作成します。</ H3>
<H3 ngの非表示= "編集 ">ユーザーの編集：</ H3>

<Formクラス= "フォームの水平 ">
<DIVクラス= "フォーム・グループ」>
<Labelクラス= "COL-SM -2コントロールラベル">ファーストネーム：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "fNameを「NG-無効="！編集"プレースホルダ="ファーストネーム">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ」>
<Labelクラス= "COL-SM -2コントロールラベル">姓：</ label>は
<DIVクラス= "COL-SM -10">
<input type = "text" NG -model = "LNAME" NG-無効= "！編集"プレースホルダ= "姓">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ」>
<Labelクラス= "COL-SM -2コントロールラベル">パスワード：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw1"プレースホルダ= "パスワード">
</ DIV>
</ DIV>
<DIVクラス= "フォーム・グループ」>
<Labelクラス= "COL-SM -2コントロールラベル">繰り返し：</ label>は
<DIVクラス= "COL-SM -10">
<入力タイプ= "パスワード" NG -model = "passw2"プレースホルダ= "繰り返しパスワード">
</ DIV>
</ DIV>
</フォーム>

<HR>
<Buttonクラスは、= "btn- BTN成功」NG-無効="エラー||不完全">
<スパンクラス= "glyphicon glyphicon- </ span>の変更を保存保存します">
</ボタン>
</ DIV>

<スクリプトSRC = "myUsers.js"> </スクリプト>
</ BODY>
</ HTML>

»をお試しください

コマンドの構文解析

AngularJSディレクティブ	説明
<HTML ngのアプリ	<HTML>要素は、（名前の）アプリケーションを定義するために
<ボディNG-コントローラ	<body>要素は、コントローラを定義するために
<Trのngのリピート	サイクルユーザーオブジェクトの配列、<TR>要素内の各ユーザーオブジェクト。
<ボタンNGクリック	関数はeditUserをクリックし、<ボタン>要素（）が呼び出されるとき
<H3のNG-ショー	あなたは= trueを表示<H3>要素を編集する場合
<H3のngの非表示	あなたは=真の隠された<H3>要素を編集する場合
<入力ngのモデル	アプリケーションのための<input>要素を結合
<ボタンngの禁止	エラーが発生した場合、またはncomplete = trueを無効にする<ボタン>要素

アナリティックのブートストラップクラス

要素	ブートストラップクラス	定義
<DIV>	コンテナ	容器の内容物
<表>	テーブル	テーブル
<表>	テーブルストライプ	表のストライプの背景
<ボタン>	BTN	プッシュボタン
<ボタン>	BTN-成功	サクセス・ボタン
<スパン>	glyphicon	シェブロン
<スパン>	glyphicon鉛筆	鉛筆アイコン
<スパン>	glyphiconユーザー	ユーザーアイコン
<スパン>	glyphicon保存	[保存]アイコン
<フォーム>	フォームの水平	水平台
<DIV>	フォーム・グループ	フォームグループ
<ラベル>	コントロールラベル	コントローラタグ
<ラベル>	COL-SM-2	2オーバー
<DIV>	COL-SM-10	10以上

JavaScriptコード

myUsers.js

angular.module（ 'て、myApp'、[] ）。コントローラ（ 'userCtrl'、関数（$スコープ）{
$ scope.fName = '';
$ scope.lName = '';
$ scope.passw1 = '';
$ scope.passw2 = '';
$ Scope.users = [
{ID：1、fNameを： ' HEGE'、LNAME：「Pege "}、
{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 =関数（ID）{
場合（ID == '新'） {
$の scope.edit =はtrue。
$ scope.incomplete =はtrue。
$ scope.fName = '';
$ scope.lName = '';
}エルス{
$の scope.edit = falseは、
$ Scope.fName = $ scope.users [ID-1] .fName。
$ Scope.lName = $ scope.users [ID-1] .lName。
}
};

。$スコープ$ウォッチ（ 'passw1 '、関数（）{$ scope.test（）;}）;
。$スコープ$ウォッチ（ 'passw2 '、関数（）{$ scope.test（）;}）;
。$スコープ$ウォッチ（ 'fNameを '、関数（）{$ scope.test（）;}）;
。$スコープ$ウォッチ（ 'LNAME '、関数（）{$ scope.test（）;}）;

$ scope.test =関数（）{
（$ scope.passw1！== $のscope.passw2場合）{
$の scope.error =はtrue。
}エルス{
$の scope.error = falseは、
}
$ scope.incomplete = falseは、
（$のscope.edit &&（！$場合 scope.fName.length ||
！$ Scope.lName.length ||
！$ Scope.passw1.length ||！$ Scope.passw2.length））{
$ scope.incomplete =はtrue。
}
};

}）;

JavaScriptのコード解析

スコープのプロパティ	使用
$ 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	検証エラー、およびモデル変数の完全性