AngularJS_1

[AngularJS] 7. Table - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:24
728x90
반응형

AngularJS Tables

 ng-repeat 지시어는 테이블형식으로 보여주기에 완벽합니다.

1. Displaying Data in a Table
 
 Augular를 이용한 테이블 표시는 매우 간단합니다:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
 
    <div ng-app="myApp" ng-controller="customersCtrl"> 
 
        <table>
          <tr ng-repeat="x in names">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
          </tr>
        </table>
 
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            $http.get("http://www.w3schools.com/angular/customers.php")
            .success(function (response) {$scope.names = response.records;});
        });
   </script>
 
    </body>
</html>
 
cs



 







2. Displaying with CSS Style
 깔끔하게 만들기 위해서, 페이지에 CSS를 추가합니다:
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html>
    <style>
        table, th , td  {
          border: 1px solid grey;
          border-collapse: collapse;
          padding: 5px;
        }
        table tr:nth-child(odd)    {
          background-color: #f1f1f1;
        }
        table tr:nth-child(even) {
          background-color: #ffffff;
        }
   </style>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <body>
 
        <div ng-app="myApp" ng-controller="customersCtrl"> 
 
            <table>
              <tr ng-repeat="x in names">
                <td>{{ x.Name }}</td>
                <td>{{ x.Country }}</td>
              </tr>
            </table>
 
        </div>
 
        <script>
            var app = angular.module('myApp', []);
            app.controller('customersCtrl', function($scope, $http) {
                $http.get("http://www.w3schools.com/angular/customers.php")
                .success(function (response) {$scope.names = response.records;});
            });
       </script>
 
    </body>
</html>
 
cs









3. Display with orderBy Filter
 테이블을 정렬하기 위해서, orderBy 필터를 추가합니다:
 

 

1
2
3
4
5
6
7
 
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
cs





4. Display with uppercase Filter
 대문자로 표시하기 위해서, uppercase 필터를 추가합니다:




1
2
3
4
5
6
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase}}</td>
  </tr>
</table>
cs




5. Display the table Index ($index)
 테이블 인덱스를 표시하기위해, <td> 태그에 $index를 추가합니다:


1
2
3
4
5
6
7
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
cs





6. Using $even and $odd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!DOCTYPE html>
<html>
<style>
table, td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
</style>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
<div ng-app="myApp" ng-controller="customersCtrl"> 
 
<table>
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Name }}</td>
    <td ng-if="$even">
    {{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Country }}</td>
    <td ng-if="$even">
    {{ x.Country }}</td>
  </tr>
</table>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.w3schools.com/angular/customers.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
 
</body>
</html>
 
cs






 



* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
 


728x90
반응형
저작자표시 (새창열림)