Angularjs 테이블
NG-Repeat 지침은 테이블을 완벽하게 표시 할 수 있습니다.
테이블에 데이터를 표시합니다
테이블을 표시하는 것은 Angular를 사용하기가 매우 쉽습니다.
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-app = "myapp" ng-controller = "customerctrl"> <table> <tr ng-repeat = "x in names"> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> var app = angular.module. []); app.controller ( 'customerctrl', function ($ scope, $ http) {$ http.get ( "/angularjs/data/customer_json.php") .success (function (respone) {$ scope.names = response.records;}); </html> </html>실행 결과 :
| Alfreds Futterkiste | 독일 |
| Ana Trujillo Emparedados y Holdos | 멕시코 |
| Antonio Moreno Taquería | 멕시코 |
| 뿔 주위 | 영국 |
| B의 음료 | 영국 |
| Berglunds Snabbköp | 스웨덴 |
| Blauer Delikatessen을 참조하십시오 | 독일 |
| Blondel Père et Fils | 프랑스 |
| 볼리도 코미다 준비 | 스페인 |
| Bon App ' | 프랑스 |
| 최하위 마켓 세 | 캐나다 |
| 선인장 Comidas Para Llevar | 아르헨티나 |
| Centro Comercial Moctezuma | 멕시코 |
| Chop-Suey Chinese | 스위스 |
| Comércio Mineiro | 브라질 |
CSS 스타일 사용
페이지를 더 아름답게하기 위해 페이지에서 CSS를 사용할 수 있습니다.
CSS 스타일
</style> </head> <body> <div ng-app = "myapp"ng-controller = "customerctrl"> <table> <tr ng-repeat = "x names"> <td> {{x.name}} </td> <td> {x.country}} </td> </tab> </tab> </td> </td> </td> Angular.Module ( 'myApp', []); app.controller ( 'customerctrl', function ($ scope, $ http) {$ http.get ( "http://www.runoob.com/gry/angularjs/data/customers_json.php") response.records;});}); </script> </body> </html>실행 결과 :
| Alfreds Futterkiste | 독일 |
| Ana Trujillo Emparedados y Holdos | 멕시코 |
| Antonio Moreno Taquería | 멕시코 |
| 뿔 주위 | 영국 |
| B의 음료 | 영국 |
| Berglunds Snabbköp | 스웨덴 |
| Blauer Delikatessen을 참조하십시오 | 독일 |
| Blondel Père et Fils | 프랑스 |
| 볼리도 코미다 준비 | 스페인 |
| Bon App ' | 프랑스 |
| 최하위 마켓 세 | 캐나다 |
| 선인장 Comidas Para Llevar | 아르헨티나 |
| Centro Comercial Moctezuma | 멕시코 |
| Chop-Suey Chinese | 스위스 |
| Comércio Mineiro | 브라질 |
Orderby 필터를 사용하십시오
정렬 디스플레이, Orderby 필터를 사용할 수 있습니다.
AngularJS 인스턴스
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> <script> <script> <script> <table, td {porder : 1px solidgry; 국경-콜라스 : 붕괴; 패딩 : 5px;} 테이블 tr : nth-child (홀수) {배경 색 : #f1f1f1;} 테이블 tr : nth-Child (균일) {back 'country' "> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <cript> angular.module ( 'myapp', []); app.controller ( 'customerctrl', 기능 $ http.get ( "/try/angularjs/data/customers_json.php") .success (function (respone) {$ scope.names = respons.records;});}); </script> </body> </html>실행 효과 :
| 선인장 Comidas Para Llevar | 아르헨티나 |
| Comércio Mineiro | 브라질 |
| 최하위 마켓 세 | 캐나다 |
| Blondel Père et Fils | 프랑스 |
| Bon App ' | 프랑스 |
| Alfreds Futterkiste | 독일 |
| Blauer Delikatessen을 참조하십시오 | 독일 |
| Ana Trujillo Emparedados y Holdos | 멕시코 |
| Antonio Moreno Taquería | 멕시코 |
| Centro Comercial Moctezuma | 멕시코 |
| 볼리도 코미다 준비 | 스페인 |
| Berglunds Snabbköp | 스웨덴 |
| Chop-Suey Chinese | 스위스 |
| 뿔 주위 | 영국 |
| B의 음료 | 영국 |
대문자 필터를 사용하십시오
대문자 필터를 사용하여 대문자로 변환하십시오.
AngularJS 인스턴스
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> <script> <script> <script> <table, td {porder : 1px solidgry; 국경-콜라스 : 붕괴; 패딩 : 5px;} 테이블 tr : nth-Child (홀수) {배경 색 : #f1f1f1;} 테이블 tr : nth-child (짝) {back <td> {{x.name}} </td> <td> {{x.country | 대문자}}} </td> </tr> </table> </div> <cript> var app = angular.module ( 'myApp', []); app.controller ( 'customerctrl', function ($ scope, $ http) {$ http.get ( "/try/angularjs/data/data/custourme_json.php". {$ scope.names = respons.records;});}); </script> </body> </html>실행 효과 :
| Alfreds Futterkiste | 독일 |
| Ana Trujillo Emparedados y Holdos | 멕시코 |
| Antonio Moreno Taquería | 멕시코 |
| 뿔 주위 | 영국 |
| B의 음료 | 영국 |
| Berglunds Snabbköp | 스웨덴 |
| Blauer Delikatessen을 참조하십시오 | 독일 |
| Blondel Père et Fils | 프랑스 |
| 볼리도 코미다 준비 | 스페인 |
| Bon App ' | 프랑스 |
| 최하위 마켓 세 | 캐나다 |
| 선인장 Comidas Para Llevar | 아르헨티나 |
| Centro Comercial Moctezuma | 멕시코 |
| Chop-Suey Chinese | 스위스 |
| Comércio Mineiro | 브라질 |
일련 번호 표시 ($ index)
테이블 디스플레이 일련 번호는 <td>에 $ index를 추가 할 수 있습니다.
AngularJS 인스턴스
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> <script> <script> <script> <table, td {porder : 1px solidgry; 국경-콜라스 : 붕괴; 패딩 : 5px;} 테이블 tr : nth-Child (홀수) {배경 색 : #f1f1f1;} 테이블 tr : nth-child (짝) {back <td> {{$ index + 1}} </td> <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> </div> <cript> app = angular.modul ( 'myapp', []); 함수 ($ scope, $ http) {$ http.get ( "/try/angularjs/data/customers_json.php") .success (function (respone) {$ scope.names = response.records;}); </script> </body> </html>실행 효과 :
| 1 | Alfreds Futterkiste | 독일 |
| 2 | Ana Trujillo Emparedados y Holdos | 멕시코 |
| 3 | Antonio Moreno Taquería | 멕시코 |
| 4 | 뿔 주위 | 영국 |
| 5 | B의 음료 | 영국 |
| 6 | Berglunds Snabbköp | 스웨덴 |
| 7 | Blauer Delikatessen을 참조하십시오 | 독일 |
| 8 | Blondel Père et Fils | 프랑스 |
| 9 | 볼리도 코미다 준비 | 스페인 |
| 10 | Bon App ' | 프랑스 |
| 11 | 최하위 마켓 세 | 캐나다 |
| 12 | 선인장 Comidas Para Llevar | 아르헨티나 |
| 13 | Centro Comercial Moctezuma | 멕시코 |
| 14 | Chop-Suey Chinese | 스위스 |
| 15 | Comércio Mineiro | 브라질 |
$와 $ 홀수를 사용하십시오
AngularJS 인스턴스
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/libs/angular.js/1.4.6/angular.min.js"> </script> <script> <script> <style> 테이블, td {px solid Gray; 국경-콜라스 : 붕괴; 패딩 : 5px;} </style> </head> <body> <div ng-app = "myApp"ng-controller = "customersctrl"> <table> <tr ng-repeat = "x names"> <td ng-if = "$ 홀수"style = "background-color :#f1f1f1"> {x.name}}}}}}}} ng-if = "$ 균일"> {{x.name}} </td> <td ng-if = "$ 홀수"style = "back </tr> </table> </div> <cript> var app = angular.module ( 'myapp', []); app.controller ( 'customersctrl', function ($ scope, $ http) {$ http.get ( "/angularjs/data/customers_json.php") response.records;});}); </script> </body> </html>실행 효과 :
| Alfreds Futterkiste | 독일 |
| Ana Trujillo Emparedados y Holdos | 멕시코 |
| Antonio Moreno Taquería | 멕시코 |
| 뿔 주위 | 영국 |
| B의 음료 | 영국 |
| Berglunds Snabbköp | 스웨덴 |
| Blauer Delikatessen을 참조하십시오 | 독일 |
| Blondel Père et Fils | 프랑스 |
| 볼리도 코미다 준비 | 스페인 |
| Bon App ' | 프랑스 |
| 최하위 마켓 세 | 캐나다 |
| 선인장 Comidas Para Llevar | 아르헨티나 |
| Centro Comercial Moctezuma | 멕시코 |
| Chop-Suey Chinese | 스위스 |
| Comércio Mineiro | 브라질 |
위의 것은 AngularJS 형태 재료의 편집이며 나중에 계속 추가 할 것입니다. 도움이 필요한 학생들을 도울 수 있기를 바랍니다.