AngularJS الجدول
نانوغرام تكرار التعليمات يمكن أن يكون على شكل عرض مثالي.
عرض البيانات في الجدول
عرض النموذج الزاوي هو بسيط جدا:
AngularJS الأمثلة
<div نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "customersCtrl">
<جدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
</ div>
<script>
فار التطبيق = angular.module ( 'اسم التطبيق "، [])؛
app.controller ( 'customersCtrl، وظيفة ($ نطاق، $ المتشعب) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (وظيفة (الاستجابة) {$ scope.names = response.records؛})؛
})؛
</ script>
<جدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
</ div>
<script>
فار التطبيق = angular.module ( 'اسم التطبيق "، [])؛
app.controller ( 'customersCtrl، وظيفة ($ نطاق، $ المتشعب) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (وظيفة (الاستجابة) {$ scope.names = response.records؛})؛
})؛
</ script>
محاولة »
استخدام أنماط CSS
من أجل جعل الصفحة أكثر جاذبية، يمكننا استخدام CSS في الصفحة:
أنماط CSS
<نمط>
الجدول، ال، ت {
الحدود: رمادي الصلبة 1PX.
الحدود انهيار: انهيار.
الحشو: 5px؛
}
الجدول آر: الألف الطفل (الغريب ) {
لون الخلفية: # f1f1f1؛
}
الجدول آر: الألف الطفل (حتى ) {
لون الخلفية: # FFFFFF.
}
</ النمط>
الجدول، ال، ت {
الحدود: رمادي الصلبة 1PX.
الحدود انهيار: انهيار.
الحشو: 5px؛
}
الجدول آر: الألف الطفل (الغريب ) {
لون الخلفية: # f1f1f1؛
}
الجدول آر: الألف الطفل (حتى ) {
لون الخلفية: # FFFFFF.
}
</ النمط>
محاولة »
استخدام فلتر orderBy
نوع العرض، يمكنك استخدام مرشحات orderBy:
AngularJS الأمثلة
<جدول>
<tr نانوغرام تكرار = "س في أسماء | orderBy: 'البلد'">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
<tr نانوغرام تكرار = "س في أسماء | orderBy: 'البلد'">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
محاولة »
استخدام فلتر الأحرف الكبيرة
استخدام فلتر الأحرف الكبيرة إلى أحرف كبيرة:
AngularJS الأمثلة
<جدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{x.Name}} </ td>
<td> {{x.Country | الأحرف الكبيرة }} </ td>
</ tr>
</ الجدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{x.Name}} </ td>
<td> {{x.Country | الأحرف الكبيرة }} </ td>
</ tr>
</ الجدول>
محاولة »
عدد العرض ($ المؤشر)
يظهر الرقم التسلسلي يمكن إضافة الجدول في الفهرس $ <td> في:
AngularJS الأمثلة
<جدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{$ مؤشر + 1}} </ td>
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td> {{$ مؤشر + 1}} </ td>
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ الجدول>
محاولة »
استخدام $ حتى و$ الغريب
AngularJS الأمثلة
<جدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td نانوغرام إذا = "$ الغريب" على غرار = "لون الخلفية: # f1f1f1"> {{x.Name}} </ td>
<td نانوغرام إذا = "$ حتى"> {{x.Name}} </ td>
<td نانوغرام إذا = "$ الغريب" على غرار = "لون الخلفية: # f1f1f1"> {{x.Country}} </ td>
<td نانوغرام إذا = "$ حتى"> {{x.Country}} </ td>
</ tr>
</ الجدول>
<tr نانوغرام تكرار = "س في الأسماء">
<td نانوغرام إذا = "$ الغريب" على غرار = "لون الخلفية: # f1f1f1"> {{x.Name}} </ td>
<td نانوغرام إذا = "$ حتى"> {{x.Name}} </ td>
<td نانوغرام إذا = "$ الغريب" على غرار = "لون الخلفية: # f1f1f1"> {{x.Country}} </ td>
<td نانوغرام إذا = "$ حتى"> {{x.Country}} </ td>
</ tr>
</ الجدول>
محاولة »