スマートテーブルのst検索は機能しません

Question

マイページにスマートテーブルを実装しました。ng-includeとst-searchは機能しません。ここに私のコードは次のとおりです。

表

<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(); 

} 

私のサービスが正常に動作し、私は取得していますデータプラスそれはテーブルに表示されます、私はただ検索することはできません。

ご協力いただければ幸いです。ありがとう

Answer 1

私は試しました。結論として、あなたのコードはスマートなテーブルではなく$ httpエラーが発生する可能性があります。 JSFiddle
これらのJSONデータを使用すると、 'role'列以外のすべての列をフィルタリングできました。

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

データがJSON形式であるかどうかを確認してください。

'role'列には、このようにコードする必要があります。
OK <input st-search="role.name"
NG <input st-search="role"

そして、私はあなたはそれが不要なので、この部分をコーディングする必要はありませんと思います。

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