2017-01-14 12 views
0

ng-include을 통해 내 페이지에 스마트 테이블을 구현했으며 st-search이 작동하지 않습니다. 여기에 내 코드입니다 :스마트 테이블 st 검색이 작동하지 않습니다.

<div class="horizontal-scroll" ng-controller="SmartTableController"> 
    <div class="form-group select-page-size-wrap "> 
    <label>Rows on page 
     <select class="form-control selectpicker show-tick" title="Rows on page" selectpicker 
       ng-model="smartTablePageSize" ng-options="i for i in [5,10,15,20,25]"> 
     </select> 
    </label> 
    </div> 
    <table class="table" st-table="displayedData" st-safe-src="smartTableData" > 
    <thead> 
    <tr class="sortable "> 
     <th class="table-id" st-sort="id" st-sort-default="true">#</th> 
     <th st-sort="firstname">Prénom</th> 
     <th st-sort="lastname">Nom</th> 
     <th st-sort="role">Rôle</th> 
     <th st-sort="email">Email</th> 
     <th st-sort="chargeRate">Taux de charge</th> 
    </tr> 
    <tr> 
     <th></th> 
     <th><input st-search="firstname" placeholder="Chercher Prénom" class="input-sm form-control search-input" 
       type="search"/></th> 
     <th><input st-search="lastname" placeholder="Chercher Nom" class="input-sm form-control search-input" 
       type="search"/></th> 
     <th><input st-search="role" placeholder="Chercher Rôle" class="input-sm form-control search-input" 
       type="search"/></th> 
     <th><input st-search="email" placeholder="Chercher Email" class="input-sm form-control search-input" type="search"/> 
     </th> 
     <th><input st-search="chargeRate" placeholder="Chercher Taux de charge" class="input-sm form-control search-input" type="search"/> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in displayedData"> 
     <td class="table-id">{{item.id}}</td> 
     <td>{{item.firstname}}</td> 
     <td>{{item.lastname}}</td> 
     <td>{{item.role[0].name}}</td> 
     <td><a class="email-link" ng-href="mailto:{{item.email}}">{{item.email}}</a></td> 
     <td>{{item.chargeRate}}</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td colspan="6" class="text-center"> 
     <div st-pagination="" st-items-by-page="smartTablePageSize" st-displayed-pages="5"></div> 
     </td> 
    </tr> 
    </tfoot> 
    </table> 
</div> 

다음 내가 여기에 나머지 응용 프로그램에서 데이터를 받고 있어요 내 컨트롤러입니다 :

angular.module('BlurAdmin.pages.users') 
.controller('SmartTableController',SmartTableController); 

function SmartTableController ($log, $scope, smartTableFactory) { 

$scope.smartTableData = []; 
$scope.selectedUsers = {}; 
$scope.smartTablePageSize = 10; 


/** 
* Get Smart Table data 
*/ 
$scope.getSmartTableData = function() { 
    smartTableFactory.getSmartTableData() 
      .success(function (data) { 
       $scope.smartTableData = data; 
       $scope.displayedData = angular.copy($scope.smartTableData); 
       console.log(" Data : " , data); 
//Edit 
    $scope.displayedData = $scope.smartTableData; 
      }) 
      .error(function (data, status) { 

       $scope.addMessage = "Erreur data : " + data + ' ' + status; 
       $log.log(data.error + '' + status); 
      }); 
    }; 

$scope.getSmartTableData(); 

} 

내 서비스가 잘 작동하고 나는군요 데이터 플러스 테이블에 표시, 난 그냥 검색 할 수 없습니다.

도움이 될 것입니다. 감사합니다

+0

가까이 사용하는 방법에 대한 문서를 읽기 '일이-안전 src' – charlietfl

+0

나는 내가'추가 세인트 table'와 한 않았다 중계기 데이터를 변경하지만 문제는 –

+0

을 지속'세인트 table'입니다 'smartTableData'와는 다른 배열을 배열합니까? – charlietfl

답변

0

나는 시도했다. 결론적으로 코드는 스마트 테이블이 아닌 $ http 오류가 발생할 수 있습니다. JSFiddle
이 JSON 데이터를 사용할 때 '역할'열을 제외한 모든 열을 필터링 할 수 있습니다.

$scope.smartTableData = 
     [ 
     { firstname: 1, lastname: 'aaaa', role: [{ name: 'employee1' }], chargeRate: 10, email: '[email protected]' }, 
     { firstname: 2, lastname: 'bbbb', role: [{ name: 'employee2' }], chargeRate: 20, email: '[email protected]' }, 
     { firstname: 3, lastname: 'cccc', role: [{ name: 'employee3' }], chargeRate: 30, email: '[email protected]' }, 
     { firstname: 4, lastname: 'dddd', role: [{ name: 'employee4' }], chargeRate: 40, email: '[email protected]' } 
     ]; 

데이터가 JSON 형식인지 여부를 정확하게 확인하십시오.

'역할'열에서 이와 같이 작성해야합니다.
OK <input st-search="role.name"
NG <input st-search="role"

그리고 나는 그것이 불필요한 때문에이 부분을 코딩 할 필요가 없습니다 생각합니다.

$scope.displayedData = angular.copy($scope.smartTableData); 
    $scope.displayedData = $scope.smartTableData; 
+0

데이터가 – charlietfl

+0

에 설명 된대로 비동기 적으로로드 될 때 필터링되지 않은 배열을 저장해야하며 그래야 데이터 복제가 필요합니다. 원인은 [docs] (https : //)에 지정된대로 나머지 서비스에서 데이터를 가져 오는 것입니다. lorenzofox3.github.io/smart-table-website/) –