여분의 행과 열을 사용하여 각도 j와 데이터 테이블을 사용하여 데이터를 바인딩하는 방법

Question

안녕하세요 저는 angularjs와 datatable js가있는 ASP.NET MVC를 사용하여 하나의 응용 프로그램을 만들고 있습니다.

this 도움말의 도움으로 각도 j의 데이터 테이블을 사용하여 데이터를 표시하는 테이블을 구현했습니다.

그러나 나는 정적과 같은 HTML에서 열 이름과 같은 기능을 사용하여 데이터를 바인딩 할 : 문서 저자

사용 작업을하고있다 :

<table id="entry-grid" datatable="" dt-options="dtOptions" 
     dt-columns="dtColumns" class="table table-hover"> 
</table> 

하지만 난에 의해 이런 식으로하고 싶지 나는 또한 N 추가를 클릭 버튼에 동일한 기능을 사용하여 표 안에 새 열을 추가 할

<table id="tblusers" class="table table-bordered table-striped table-condensed datatable"> 
    <thead> 
    <tr> 
     <th width="2%"></th> 
     <th>User Name</th> 
     <th>Email</th> 
     <th>LoginID</th> 
     <th>Location Name</th> 
     <th>Role</th> 
     <th width="7%" class="center-text">Active</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="user in Users"> 
     <td><a href="#" ng-click="DeleteUser(user)"><span class="icon-trash"></span></a></td> 
     <td><a class="ahyperlink" href="#" ng-click="EditUser(user)">{{user.UserFirstName}} {{user.UserLastName}}</a></td> 
     <td>{{user.UserEmail}}</td> 
     <td>{{user.LoginID}}</td> 
     <td>{{user.LocationName}}</td> 
     <td>{{user.RoleName}}</td> 
     <td class="center-text" ng-if="user.IsActive == true"><span class="icon-check2"></span></td> 
     <td class="center-text" ng-if="user.IsActive == false"><span class="icon-close"></span></td> 
    </tr> 
    </tbody> 
</table> 

: 내 데이터에 따라 NG 반복을 사용하여 동일한 기능 이상 사용 기록.

가능합니까?

예 가능한 경우 어떻게하면 jsfiddle 또는 다른 편집기에서 나를 보여 주면 미리 감사 할 수 있습니다.

하십시오 "각 방법"을 사용하는

Answer 1

당신은 davidkonrad로 사용할 수

단지 구조 아래와 같이 주석의 link을 제안 다음과 같이 각도로 컨트롤러를 만듭니다.

var app = angular.module('MyApp1', ['datatables']); 
app.controller('homeCtrl', ['$scope', 'HomeService', 
    function ($scope, homeService) { 

     $scope.GetCustomers = function() { 
      homeService.GetCustomers() 
       .then(
       function (response) { 
        debugger; 
        $scope.Customers = response.data; 
       }); 
     } 

     $scope.GetCustomers(); 
    }]) 

서비스 :

app.service('HomeService', ["$http", "$q", function ($http, $q) { 

    this.GetCustomers = function() { 
     debugger; 
     var request = $http({ 
      method: "Get", 
      url: "/home/getdata" 
     }); 
     return request; 
    } 
}]); 

Answer 2

지시한다 각-dataTables가 datatable="ng"에 의해 데모 비주얼 스튜디오 편집기에서 만든 DOWNLOAD 소스 코드 :

<table id="entry-grid" 
    datatable="ng" 
    dt-options="dtOptions" 
    dt-columns="dtColumns" 
    class="table table-hover"> 
</table> 

그런 다음 열 인덱스보다는 JSON을 해결하기 위해 dtColumns 변경 항목 수 :

$scope.dtColumns = [ 
    DTColumnBuilder.newColumn(0).withTitle('').withOption('width', '2%'), 
    DTColumnBuilder.newColumn(1).withTitle('User Name'), 
    DTColumnBuilder.newColumn(2).withTitle('Email'), 
    DTColumnBuilder.newColumn(3).withTitle('LoginID'), 
    DTColumnBuilder.newColumn(4).withTitle('Location Name'), 
    DTColumnBuilder.newColumn(5).withTitle('Role Name'), 
    DTColumnBuilder.newColumn(6).withTitle('Active').withOption('width', '7%') 
]; 

<thead> 섹션을 건너 뛸 수 있습니다. f 위와 같이하십시오. 마지막으로 나는 하나에 두 개의 마지막 중복 <td> 년대를 줄일 :

HTML :

<table id="entry-grid" datatable="ng" class="table table-hover"> 
      <thead> 
       <tr> 
        <th> 
         CustomerId 
        </th> 
        <th>Company Name </th> 
        <th>Contact Name</th> 
        <th> 
         Phone 
        </th> 
        <th> 
         City 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="c in Customers"> 
        <td>{{c.CustomerID}}</td> 
        <td>{{c.CompanyName}}</td> 
        <td>{{c.ContactName}}</td> 
        <td>{{c.Phone}}</td>\ 
        <td>{{c.City}}</td> 
       </tr> 
      </tbody> 
     </table> 

이

<td class="center-text"> 
    <span ng-show="user.IsActive == true" class="icon-check2"></span> 
    <span ng-show="user.IsActive == false" class="icon-close"></span> 
</td>