Latest web development tutorials

AngularJS와 테이블

NG 반복 명령은 완벽한 표시 형태가 될 수 있습니다.

테이블의 데이터를 표시

각 양식을 사용하여 디스플레이는 매우 간단합니다 :

예를 AngularJS와

<사업부의 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;});
});
</ 스크립트>

»시도

CSS 스타일을 사용하여

페이지가 더 매력적으로하기 위해, 우리는 페이지 CSS를 사용할 수있다 :

CSS 스타일

<스타일>
테이블, 일, TD {
국경 : 1 픽셀 고체 회색;
국경 - 붕괴 : 붕괴;
패딩 : 5px;
}
테이블 TR : n 번째 자녀 (홀수 ) {
배경 색상 : # f1f1f1;
}
테이블 TR : (심지어 n 번째 자녀 ) {
배경 색상 : #FFFFFF;
}
</ 스타일>

»시도

해 orderBy 필터를 사용

정렬 디스플레이, 당신은 해 orderBy 필터를 사용할 수 있습니다 :

예를 AngularJS와

<표>
<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>
</ 테이블>

»시도

디스플레이 번호 ($ 인덱스)

표는 일련 번호는 $ 인덱스를 추가 할 수 있습니다 보여줍니다 <TD>에서 :

예를 AngularJS와

<표>
<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>
</ 테이블>

»시도