본문 바로가기
Programming/JavaScript

[Angular] 3단 배열 테이블 만들기

by NAMP 2015. 9. 22.
[Angular] 3단 배열 테이블 만들기

body에 ng-app 을 설정합니다. 

<body ng-app="statisticService">

div 에 ng-controller 를 설정합니다. 

<div id="resultMonthly" style="display:block; margin-top:30px" ng-controller="resultMonthController">

angular 모듈을 생성합니다. 

var app = angular.module('statisticService',[]);


날짜별로, 결과를 출력하는데, 3단으로 결과를 보여주기 위한 table 태그를 생성합니다. 

<table class="table-multi mt-30">

theady 를 생성합니다. 

<thead>
                              <tr>
                                   <th>일</th>
                                   <th>성공</th>
                                   <th>실패</th>
                                   <th>합계</th>
                                   <th>일</th>
                                   <th>성공</th>
                                   <th>실패</th>
                                   <th>합계</th>
                                   <th>일</th>
                                   <th>성공</th>
                                   <th>실패</th>
                                   <th>합계</th>
                              </tr>
                         </thead>

[일,성공,실패,합계] 가 하나의 세트이며, 이것이 3단으로 배열됩니다. 

tbody 를 생성합니다. 

<tbody id="bodyDaily">    
                              <tr ng-repeat="day in range(1,10)">
                                   <td>{{day}}</td>
                                   <td>{{success[day]}}</td>
                                   <td>{{fail[day]}}</td>
                                   <td>{{total[day]}}</td>                   
                                   <td>{{day+10}}</td>
                                   <td>{{success[day+10]}}</td>
                                   <td>{{fail[day+10]}}</td>
                                   <td>{{total[day+10]}}</td>
                                   <td>{{day+20}}</td>
                                   <td>{{success[day+20]}}</td>
                                   <td>{{fail[day+20]}}</td>
                                   <td>{{total[day+20]}}</td>
                              </tr>
                              <tr>
                                   <td ng-repeat="dummy in range(1,8)"></td>                   
                                   <td>31</td>
                                   <td>{{success[31]}}</td>
                                   <td>{{fail[31]}}</td>
                                   <td>{{total[31]}}</td>
                              </tr>         
                         </tbody>

range(1,10) 함수 호출을 통해서, 1부터 10까지의 값을 얻을 수 있으며,

이를 이용해서, +0, +10, +20 의 산술연산을 통해 1부터 30까지의 값을 생성합니다.

이것들을 모두 배열로 만들어서, 값을 할당할 수 있도록 합니다. 


     $scope.setdata = function (data){
          $scope.success = [];
          $scope.fail = [];
          $scope.total = [];
         
          for(var i = 0; i < data.length; i++){
               var day = parseInt(data[i].day);
               var success = data[i].successCnt;
               var fail = data[i].failCnt;
               var total = data[i].connCnt;              
               $scope.success[day] = success;
               $scope.fail[day] = fail;
               $scope.total[day] = total;              
          }
          $scope.$apply();
     };


ng-repeat 에서 사용할 range 함수를 구현합니다. 

app.factory('util', function(){
     return {
          range: function(min, max, step){
              step = step || 1;
              var input = [];
              for (var i = min; i <= max; i += step) input.push(i);
              return input;
          }
     };
});

그리고, controller 에서는 util.range 를 반환합니다. 

$scope.range = function(min, max, step){
          return util.range(min, max, step);
     };


### 전체 소스 ###

var app = angular.module('statisticService',[]);

app.factory('util', function(){
     return {
          range: function(min, max, step){
              step = step || 1;
              var input = [];
              for (var i = min; i <= max; i += step) input.push(i);
              return input;
          }
     };
});

app.controller('resultDayController', function($scope, util){
     $scope.setdata = function (data){
          $scope.success = [];
          $scope.fail = [];
          $scope.total = [];
         
          for(var i = 0; i < data.length; i++){
               var day = parseInt(data[i].day);
               var success = data[i].successCnt;
               var fail = data[i].failCnt;
               var total = data[i].connCnt;              
               $scope.success[day] = success;
               $scope.fail[day] = fail;
               $scope.total[day] = total;              
          }
          $scope.$apply();
     };
    
     $scope.range = function(min, max, step){
          return util.range(min, max, step);
     };
});

<tbody id="bodyDaily">    
                              <tr ng-repeat="day in range(1,10)">
                                   <td>{{day}}</td>
                                   <td>{{success[day]}}</td>
                                   <td>{{fail[day]}}</td>
                                   <td>{{total[day]}}</td>                   
                                   <td>{{day+10}}</td>
                                   <td>{{success[day+10]}}</td>
                                   <td>{{fail[day+10]}}</td>
                                   <td>{{total[day+10]}}</td>
                                   <td>{{day+20}}</td>
                                   <td>{{success[day+20]}}</td>
                                   <td>{{fail[day+20]}}</td>
                                   <td>{{total[day+20]}}</td>
                              </tr>
                              <tr>
                                   <td ng-repeat="dummy in range(1,8)"></td>                   
                                   <td>31</td>
                                   <td>{{success[31]}}</td>
                                   <td>{{fail[31]}}</td>
                                   <td>{{total[31]}}</td>
                              </tr>         
                         </tbody>



저작자표시 비영리 변경금지

'Programming > JavaScript' 카테고리의 다른 글

[ionic] Starting an Ionic App  (0) 2015.09.27
[ionic] framework  (0) 2015.09.26
[Angular] paging 만들기  (0) 2015.09.22
[jQuery] Datepicker  (0) 2015.09.22
[javascript] YUIDOC  (0) 2014.12.18

관련글

댓글

티스토리툴바