Lấy dữ liệu với angular đưa ra table

B1: Tạo query để lấy dữ liệu

Ví dụ:
<Query>
<ID>Q1</ID>
<Src>cnSQL_HDND</Src>
<Type>Sql</Type>
<Cmd>
Select *
From dbo.tbChungTu
Where NgayPhatSinh Between @TuNgay AND @DenNgay
</Cmd>
<SqlParameter>
TuNgay<pr&/><iif-DGVL>Url:tungay</iif-DGVL><pr&/>DateTime
DenNgay<pr&/><iif-DGVL>Url:denngay</iif-DGVL><pr&/>DateTime
</SqlParameter>
</Query>
 

B2: Tạo file Form HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div class="card mb-3" ng-app="myApp"  ng-controller="myCtrl">
.... html page
</div><!-- ng-app="myApp" -->
<style>
.... css page
</style>

<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope, $http){
//==== start
$scope.loadData = function () {       
    //... code load data   
    //alert("goto loadData..");   
    $scope.loading=true;
    loadding_show("Đang tải..");
   // Lấy giá trị trên URL
   // Khai báo URL lấy dữ liệu
   // Code load data json       
} //loadData

$scope.loadData();   
 
// Nếu có cột ngày thêm cột sau
$scope.NapChonNgay = function(name) {       
              $(name).datepicker({
              dateFormat: "dd/mm/yy",
              inline: true,
              showAnim: 'fadeIn',
              yearRange: '2010:2025',
              changeMonth: true,
              changeYear: true,
              dayNamesMin:['CN','T2','T3','T4','T5','T6','T7'],
               monthNamesShort: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6',
            'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
             });    
       return '';
    } ///
    $scope.NapChonNgay('#f_tungay');
    $scope.NapChonNgay('#f_denngay');
         

   // Mở 1 cửa số nếu có
   $scope.OpenPopup= function (obj) {
            url="/adminxml/report.aspx?name=BanHang_iif/HoaDon_A4&idDH="+obj.ID_BanHang;//
        IIF_f_OpenUrlPopup(url,"1100px","750px",'Tên cửa số'); //hàm này trong trang master
   };  
  
   // Nếu có sử dụng ngày
    $scope.napngay= function( ts)
    {
        // alert"S";
        if( ts=='homnay')
        {
            $scope.tungay='<iif-D>Date:Now<fm>{0:dd/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now<fm>{0:dd/MM/yyyy}</fm></iif-D>';
        }
        else if (ts=='homqua')
        {
            $scope.tungay='<iif-D>Date:Now_AddDay;-1<fm>{0:dd/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_AddDay;-1<fm>{0:dd/MM/yyyy}</fm></iif-D>';
        }
        else if( ts=='tuannay')
        {
            $scope.tungay='<iif-D>Date:Now_Week_Start<fm>{0:dd/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_Week_Start;5<fm>{0:dd/MM/yyyy}</fm></iif-D>';
        }
        else if( ts=='tuantruoc')
        {
            $scope.tungay='<iif-D>Date:Now_Week_Start;-7<fm>{0:dd/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_Week_Start;-2<fm>{0:dd/MM/yyyy}</fm></iif-D>';
        }
        else if(ts=='thangnay')
        {
            $scope.tungay='<iif-D>Date:Now_AddDay;-1<fm>{0:1/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_AddDay;-1<fm>{0:#DaysInMonth/MM/yyyy}</fm></iif-D>';
        }
        else if( ts=='thangtruoc')
        {
            $scope.tungay='<iif-D>Date:Now_AddMonth;-1<fm>{0:1/MM/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_AddMonth;-1<fm>{0:#DaysInMonth/MM/yyyy}</fm></iif-D>';
        }
        else if(ts=='namnay')
        {
            $scope.tungay='<iif-D>Date:Now_AddDay;-1<fm>{0:1/1/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_AddDay;-1<fm>{0:31/12/yyyy}</fm></iif-D>';
        }
        else if(ts=='namtruoc')
        {
            $scope.tungay='<iif-D>Date:Now_AddYear;-1<fm>{0:1/1/yyyy}</fm></iif-D>';
            $scope.denngay='<iif-D>Date:Now_AddYear;-1<fm>{0:31/12/yyyy}</fm></iif-D>';
        }
        // alert(tungay +'-' + denngay);
        // alert"E";
        $scope.loadData();   
    }//$scope.napngay
    
    
});//start app.controller
</script>

Copy đoạn JS phía trên đưa vào file HTML
..... Tùy vào lệnh thay đổi và copy vào
Tìm kiếm đoạn dưới thay thế vào

   - Html page
   - Css page
   - Lấy giá trị trên URL
   - Khai báo URL lấy dữ liệu
   - Code load data json  
   - Tạo click liên kết mở cửa sổ
   - Tạo hàm gộp dữ liệu giữa nhiều cột
 

* Html Page

 <!-- Tìm kiếm  -->
<div class="p-1" style="font-size:1.3em;">
<i class="fas fa-search"></i> Tìm kiếm: <input type="text" ng-model="timkiem"><i ng-click="timkiem=''" class="fas fa-trash ml-1"></i>
</div>
<!-- Tìm kiếm  -->

<!-- Từ ngày đến ngày  -->
<div class="form-row">
<div class="form-group col-md-4">
     <div class="input-group">
         <div class="input-group-prepend">
              <span class="input-group-text" >Từ ngày:</span>
         </div>
         <input autocomplete="off" ng-change="loadData()" type="text" ng-model="tungay" id="find_tungay" class='form-control' value=""  >
     </div>
</div>
<div class="form-group col-md-4">
    <div class="input-group">
        <div class="input-group-prepend">
              <span class="input-group-text" >Đến ngày:</span>
        </div>
         <input autocomplete="off" ng-change="loadData()" type="text" ng-model="denngay" id="find_denngay" class='form-control' value=""  >
    </div>
</div>
<div class="form-group col-md-4">
    
<div class="btn-group">
  <button id="btLoad" ng-click="loadData()" type="button" class="btn btn-danger"><i class="fas fa-search"></i> Xem</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" ng-click="napngay('homnay')"  href="#">Hôm nay</a>
    <a class="dropdown-item" ng-click="napngay('homqua')" href="#">Hôm qua</a>
     <div class="dropdown-divider"></div>
    <a class="dropdown-item" ng-click="napngay('tuannay')"  href="#">Tuần này</a>
    <a class="dropdown-item" ng-click="napngay('tuantruoc')"  href="#">Tuần trước</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" ng-click="napngay('thangnay')"  href="#">Tháng này</a>
    <a class="dropdown-item" ng-click="napngay('thangtruoc')"  href="#" >Tháng trước</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" ng-click="napngay('namnay')"  href="#">Năm này</a>
    <a class="dropdown-item" ng-click="napngay('namtruoc')"  href="#">Năm trước</a>
  </div>
</div>
<!-- Tùy chọn thêm chức năng  -->
<div class="btn-group">
  <button id="Button1" type="button" class="btn btn-info"><i class="fas fa-sort-amount-down"></i> </button>
  <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" ng-click="frmBanHangChiTiet()" href="#" data-toggle="modal" data-target="#Obj_popup_pIIF">Thêm chức năng ...</a>
     <div class="dropdown-divider"></div>
    
  </div>
</div>
<!-- Tùy chọn thêm chức năng  -->
</div>
</div>
<!-- Từ ngày đến ngày  -->

<!-- hiển thị tổng số phiếu -->
<div class='ml-2 mb-2'><i class="fa fa-copy"></i> Tổng số phiếu: {{ SumRow }}</div>
<!-- hiển thị tổng số phiếu -->

<!-- Datatable dữ liệu -->
<div class="table-responsive">
<table class="table table-hover  table-striped table-bordered tbTable">
  <thead>
    <tr>
      <th scope="col" class="col_ChucNang"><i class="fas fa-location-arrow"></i></th>
      <th scope="col" class="col_Ngay"><i class="far fa-calendar-alt"></i> Ngày</th>
      <th scope="col" class="col_SoPhieu"><i class="fas fa-tasks"></i> Số phiếu</th>
      <th scope="col" class="col_KhachHang"><i class="fas fa-user-tie"></i> Khách hàng</th>
      <th scope="col" class="col_TongTien"><i class="fas fa-search-dollar"></i> Tổng tiền</th>
      <th scope="col" class="col_GhiChu"><i class="fas fa-comment-alt"></i> Ghi chú</th>
      <th scope="col" class="col_UserName"><i class="fas fa-user-plus"></i> Người tạo</th>
    </tr>
  </thead>
  <tbody>
      <tr ng-repeat="x in chungtu | filter :timkiem">
      <td class="col_ChucNang">
        <div class="btn-group float-right">
            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
            <div class="dropdown-menu" >
                <a class="dropdown-item text-danger btMenuRow bt_open_w_pIIF" href="#" ng-click="reportPhieu(x)"  data-toggle="modal" data-target="#Obj_popup_pIIF"><i class="fas fa-eye"></i> Xem phiếu</a>
                <a class="dropdown-item text-danger btMenuRow bt_open_w_pIIF" href="#" ng-click="frmBanHangChiTiet(x.ID_BanHang)"  data-toggle="modal" data-target="#Obj_popup_pIIF"><i class="fas fa-layer-group"></i> Chi tiết</a>
            </div>
        </div>
      </td>
      <td class="col_Ngay">{{ x.NgayPhatSinh  | date:'dd/MM/yyyy' }}</td>
      <td class="col_SoPhieu">{{ x.So}}</td>
      <td class="col_KhachHang">{{ x.HoTen}}</td>
      <td class='col_TongTien'>{{ x.TongTien | number:0 }}</td>
      <td class="col_GhiChu">{{ x.GhiChu}}</td>
      <td class="col_UserName">{{ x.UserName}}</td>
    </tr>    
  </tbody>
  <tfoot>
    <tr>
      <td class="col_ChucNang"></td>
      <td class="col_Ngay"><i class="fab fa-creative-commons-nd"></i></td>
      <td class="col_SoPhieu">Tổng dòng: {{SumRow}}</td>
      <td class="col_KhachHang"></td>
      <td class='col_TienHang'>{{TongTienHang  | number:0 }}</td>
      <td class="col_GhiChu></td>
      <td class="col_TinhTrang"></td>
    </tr>
  </tfoot>
</table>
</div>
<!-- Datatable dữ liệu -->

 

* Css Page

 

* Lấy giá trị trên URL

 // Lấy tham số dạng ngày
    if($scope.tungay==undefined)
        $scope.tungay=  urlGetValuePara('tungay');
    if($scope.denngay==undefined)
        $scope.denngay=  urlGetValuePara('denngay');
    // Chuyển đổi từ dạng
    
    var tungay= convertDate_dmy_ymd($scope.tungay);
    var denngay=  convertDate_dmy_ymd($scope.denngay);
    if(isEmpty(tungay)) // nếu ngày rỗng lấy ngày hiện tại
    {
        tungay=getDateCurrent_ymd();
        $scope.tungay=getDateCurrent_dmy();
    }
    if(isEmpty(denngay)) // nếu ngày rỗng lấy ngày hiện tại
    {
        denngay=getDateCurrent_ymd();
        $scope.denngay=getDateCurrent_dmy();
    }
    
    // Lấy tham số dạng chữ và số
    set_tinhtrang =  urlGetValuePara('tinhtrang');
    set_tinhtrang=isEmptySet(set_tinhtrang,'');

   // Khai báo URL lấy dữ liệu
    //alert("goto http GET");
    // nếu là ngày 2021-1-1 0:0  , 31-12-2023 23:59  để không bị ảnh hưởng thời gian
    var url= "/Adminxml/Query_Do.aspx?name=NhaHang_ThuChi/ChungTu_Get&out=json&tungay={0} 0:0&denngay={1} 23:59";
    url = url.replaceAll("{0}",tungay);
    url = url.replaceAll("{1}",denngay);
    //alert("Test Url:"+url);


   // Code load data json

       $http({
            method : "GET",
            url : url
        }).then(function mySuccess(response)
           {
               //alert( "Test get success url..."+   JSON.stringify(response )   );
               $scope.chungtu= response.data.Q1;        
               //sum
                $scope.Tong_SoTien =0;
               //sum
              
                response.data.Q1.forEach(function(data, index) {
                //sum
                    $scope.Tong_SoTien +=data.Tong_SoTien;
                  //     
                });
              // alert( "Test foreach SUM: "+   $scope.Tong_SoTien  );
              
               $scope.SumRow=$scope.chungtu.length;
               //alert( "Test SumRow : "+   $scope.SumRow  );
              
               loadding_hide();
           }, function myError(response)
           {
               alert( "LỖI:"+ response.statusText );
           }
        );

 
  // Tạo liên kết mở cửa sổ

    Thêm vào giữa <td>....</td>
   <a href="#" ng-click="tenHamMoCuaSo(x)" data-toggle="modal" data-target="#Obj_popup_pIIF">{{ x.TenCot}}</a>

    Thêm JS
  $scope.tenHamMoCuaSo= function (obj) {
      //alert(obj.TenCot);
       url="/adminxml/report.aspx?name=BanHang_iif/HoaDon_A4&idDH="+obj.TenCot;//
        IIF_f_OpenUrlPopup(url,"1100px","750px",'Xem đơn hàng'); //hàm này trong trang master
    }; 

 

  // Tạo hàm gộp dữ liệu

    Thêm vào giữa <td>....</td>   
  {{ getTenHamGop(x.Cot1, x.Cot2) }}

 Thêm JS
  $scope.getTenHamGop= function(gt1,gt2) {       
     var bienKQ;
     if (!isEmpty(gt1))
           bienKQ= bienKQ+ gt1+ gt2;
       return bienKQ;
    } ///