AngularJSテーブル
ngのリピート命令は完璧な表示形態とすることができます。
テーブル内のデータを表示し
角度のフォームを使用したディスプレイは、非常に簡単です：
AngularJS例
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "customersCtrl">
<表>
<Trのngのリピート= "X名に">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
</ DIV>
<スクリプト>
VARアプリ= angular.module（ 'て、myApp'、[]）;
app.controller（ 'customersCtrl'、関数（$スコープ、$ HTTP）{
$ Http.get（「http://www.w3big.com/try/angularjs/data/Customers_JSON.php」）
.success（関数（応答）{$ scope.names = response.records;}）;
}）;
</スクリプト>
<表>
<Trのngのリピート= "X名に">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
</ DIV>
<スクリプト>
VARアプリ= angular.module（ 'て、myApp'、[]）;
app.controller（ 'customersCtrl'、関数（$スコープ、$ HTTP）{
$ Http.get（「http://www.w3big.com/try/angularjs/data/Customers_JSON.php」）
.success（関数（応答）{$ scope.names = response.records;}）;
}）;
</スクリプト>
»をお試しください
CSSスタイルを使用します
ページをより魅力的にするために、我々は、ページ内のCSSを使用することができます。
CSSスタイル
<スタイル>
テーブル、目、TD {
国境：1pxの灰色の固体。
国境崩壊：崩壊。
パディング：5pxの;
}
テーブルTR：n番目の子（奇数 ）{
背景色：＃f1f1f1;
}
テーブルTR：n番目の子（偶数 ）{
背景色：#FFFFFF;
}
</スタイル>
テーブル、目、TD {
国境：1pxの灰色の固体。
国境崩壊：崩壊。
パディング：5pxの;
}
テーブルTR：n番目の子（奇数 ）{
背景色：＃f1f1f1;
}
テーブルTR：n番目の子（偶数 ）{
背景色：#FFFFFF;
}
</スタイル>
»をお試しください
ORDERBYフィルタを使用します
ソート表示は、あなたがORDERBYフィルタを使用することができます。
AngularJS例
<表>
<Trのngのリピート= "X名で| ORDERBY： '国'">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
<Trのngのリピート= "X名で| ORDERBY： '国'">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
»をお試しください
大文字のフィルタを使用してください
大文字に、大文字のフィルタを使用します。
AngularJS例
<表>
<Trのngのリピート= "X名に">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country |大文字 }} </ TD>
</ TR>
</表>
<Trのngのリピート= "X名に">
<TD> {{x.Name}} </ TD>
<TD> {{x.Country |大文字 }} </ TD>
</ TR>
</表>
»をお試しください
表示番号（$インデックス）
表は、シリアル番号は<TD> の$インデックスに追加することができますを示しています。
AngularJS例
<表>
<Trのngのリピート= "X名に">
<TD> {{$インデックス+ 1}} </ TD>
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
<Trのngのリピート= "X名に">
<TD> {{$インデックス+ 1}} </ TD>
<TD> {{x.Name}} </ TD>
<TD> {{x.Country}} </ TD>
</ TR>
</表>
»をお試しください
$偶数と奇数$を使用します
AngularJS例
<表>
<Trのngのリピート= "X名に">
<TDのNG-IF = "$奇数"スタイル= "背景色：＃のf1f1f1"> {{x.Name}} </ TD>
<TDのNG-IF = "$でも"> {{x.Name}} </ TD>
<TDのNG-IF = "$奇数"スタイル= "背景色：＃のf1f1f1"> {{x.Country}} </ TD>
<TDのNG-IF = "$でも"> {{x.Country}} </ TD>
</ TR>
</表>
<Trのngのリピート= "X名に">
<TDのNG-IF = "$奇数"スタイル= "背景色：＃のf1f1f1"> {{x.Name}} </ TD>
<TDのNG-IF = "$でも"> {{x.Name}} </ TD>
<TDのNG-IF = "$奇数"スタイル= "背景色：＃のf1f1f1"> {{x.Country}} </ TD>
<TDのNG-IF = "$でも"> {{x.Country}} </ TD>
</ TR>
</表>
»をお試しください