ตาราง AngularJS
การเรียนการสอน NG-ซ้ำสามารถเป็นรูปแบบการแสดงผลที่สมบูรณ์แบบ
แสดงข้อมูลในตาราง
การแสดงผลโดยใช้แบบฟอร์มเชิงมุมง่ายมาก:
AngularJS ตัวอย่าง
<div NG-App = "MyApp " NG-ควบคุม = "customersCtrl">
<table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
</ div>
<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'customersCtrl' ฟังก์ชั่น ($ ขอบเขต $ HTTP) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (ฟังก์ชั่น (การตอบสนอง) {$ = scope.names response.records;});
});
</ script>
<table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
</ div>
<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'customersCtrl' ฟังก์ชั่น ($ ขอบเขต $ HTTP) {
$ Http.get ( "http://www.w3big.com/try/angularjs/data/Customers_JSON.php")
.success (ฟังก์ชั่น (การตอบสนอง) {$ = scope.names response.records;});
});
</ script>
ลอง»
ใช้รูปแบบ CSS
เพื่อที่จะทำให้หน้าเว็บที่น่าสนใจอื่น ๆ อีกมากมายที่เราสามารถใช้ CSS ในหน้านี้:
ลักษณะ CSS
<style>
ตาราง TH, td {
ชายแดน: สีเทา 1px ของแข็ง
ชายแดนยุบ: การล่มสลาย;
padding: 5px;
}
TR ตารางที่ n เด็ก (แปลก ) {
สีพื้นหลัง: # f1f1f1;
}
TR ตารางที่ n เด็ก (แม้ ) {
สีพื้นหลัง: #FFFFFF;
}
</ style>
ตาราง TH, td {
ชายแดน: สีเทา 1px ของแข็ง
ชายแดนยุบ: การล่มสลาย;
padding: 5px;
}
TR ตารางที่ n เด็ก (แปลก ) {
สีพื้นหลัง: # f1f1f1;
}
TR ตารางที่ n เด็ก (แม้ ) {
สีพื้นหลัง: #FFFFFF;
}
</ style>
ลอง»
ใช้ตัวกรอง orderBy
จอแสดงผลเรียงคุณสามารถใช้ตัวกรอง orderBy:
AngularJS ตัวอย่าง
<table>
<Tr NG-ซ้ำ = "x ชื่อ | orderBy: 'ประเทศ'">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
<Tr NG-ซ้ำ = "x ชื่อ | orderBy: 'ประเทศ'">
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
ลอง»
ใช้ตัวกรองตัวพิมพ์ใหญ่
ใช้ตัวกรองตัวพิมพ์ใหญ่ตัวพิมพ์ใหญ่:
AngularJS ตัวอย่าง
<table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{x.Name}} </ td>
<td> {{x.Country | พิมพ์ใหญ่ }} </ td>
</ tr>
</ table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{x.Name}} </ td>
<td> {{x.Country | พิมพ์ใหญ่ }} </ td>
</ tr>
</ table>
ลอง»
จำนวนการแสดงผล ($ ดัชนี)
ตารางแสดงหมายเลขสามารถเพิ่มที่ดัชนี $ <td> ใน:
AngularJS ตัวอย่าง
<table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{$ ดัชนี + 1}} </ td>
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td> {{$ ดัชนี + 1}} </ td>
<td> {{x.Name}} </ td>
<td> {{x.Country}} </ td>
</ tr>
</ table>
ลอง»
ใช้ $ และ $ แม้แปลก
AngularJS ตัวอย่าง
<table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td NG-if = "$ แปลก" style = "สีพื้นหลัง: # f1f1f1"> {{x.Name}} </ td>
<td NG-if = "$ แม้แต่"> {{x.Name}} </ td>
<td NG-if = "$ แปลก" style = "สีพื้นหลัง: # f1f1f1"> {{x.Country}} </ td>
<td NG-if = "$ แม้แต่"> {{x.Country}} </ td>
</ tr>
</ table>
<Tr NG-ซ้ำ = "x ในชื่อ">
<td NG-if = "$ แปลก" style = "สีพื้นหลัง: # f1f1f1"> {{x.Name}} </ td>
<td NG-if = "$ แม้แต่"> {{x.Name}} </ td>
<td NG-if = "$ แปลก" style = "สีพื้นหลัง: # f1f1f1"> {{x.Country}} </ td>
<td NG-if = "$ แม้แต่"> {{x.Country}} </ td>
</ tr>
</ table>
ลอง»