Умный поиск по таблице не будет работать

Я реализовал умную таблицу на своей странице через 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();

}

Мой сервис работает нормально, я получаю данные, которые отображаются в таблице, я просто не могу искать.

Любая помощь будет оценена по достоинству. Спасибо


person Moatez Bouhdid    schedule 14.01.2017    source источник
comment
Прочтите подробнее о том, как использовать st-safe-src   -  person charlietfl    schedule 15.01.2017
comment
Я сделал, добавил st-table и изменил данные ретранслятора, но проблема не устранена   -  person Moatez Bouhdid    schedule 15.01.2017
comment
st-table массив - это массив, отличный от массива smartTableData?   -  person charlietfl    schedule 15.01.2017
comment
да, подождите, я обновлю свой код   -  person Moatez Bouhdid    schedule 15.01.2017
comment
проверьте сейчас, я добавил st-table   -  person Moatez Bouhdid    schedule 15.01.2017
comment
$http является асинхронным, поэтому вы не можете назначить $scope.displayedData сразу, иначе это будет исходный пустой массив и будет такая же ссылка .... вам нужна копия и нужно назначить внутри обратного вызова   -  person charlietfl    schedule 15.01.2017
comment
Да, я сделал это, поместил его в обратный вызов и проверил, и $scope.displayedData содержит данные, поэтому не пустые.   -  person Moatez Bouhdid    schedule 15.01.2017
comment
а вы сделали копию?   -  person charlietfl    schedule 15.01.2017
comment
ты имеешь в виду как $scope.displayedData = $scope.smartTableData;? да, если вы имеете в виду это   -  person Moatez Bouhdid    schedule 15.01.2017
comment
Это не копия ... они оба являются ссылками на один и тот же массив ... используйте angular.copy($scope.smartTableData)   -  person charlietfl    schedule 15.01.2017
comment
то же самое.....   -  person Moatez Bouhdid    schedule 15.01.2017
comment
создать демонстрацию плункера, которая воспроизводит проблему   -  person charlietfl    schedule 15.01.2017
comment
plnkr.co/edit/eELVk9mJ9DPGHzKM6TyJ?p=preview   -  person Moatez Bouhdid    schedule 15.01.2017
comment
извините, не могу заставить его работать на плункере   -  person Moatez Bouhdid    schedule 15.01.2017
comment
По крайней мере, преобразуйте данные в json, и вы можете создать файл plunker и использовать $http для получения данных из этого файла. слишком много работы для меня, чтобы изменить все это   -  person charlietfl    schedule 15.01.2017
comment
Я сделал: plnkr.co/edit/0fIeC7?p=preview   -  person Moatez Bouhdid    schedule 15.01.2017
comment
Нет ... это не JSON из удаленного источника данных   -  person charlietfl    schedule 15.01.2017
comment
Когда я встаю сегодня утром, все работало нормально ...   -  person Moatez Bouhdid    schedule 15.01.2017


Ответы (1)


Я пытался. В конце концов, в вашем коде может произойти ошибка $ http, а не умная таблица. JSFiddle
Я мог фильтровать все столбцы, кроме столбца «роль», когда я использовал эти Данные JSON.

   $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.

В столбце "роль" введите такой код.
OK <input st-search="role.name"
NG <input st-search="role"

И я думаю, вам не нужно кодировать эту часть, потому что в ней нет необходимости.

   $scope.displayedData = angular.copy($scope.smartTableData);
   $scope.displayedData = $scope.smartTableData;
person redpeaks    schedule 15.01.2017
comment
Но требует хранения нефильтрованного массива, когда данные загружаются асинхронно, как указано в документации. - person charlietfl; 15.01.2017
comment
и да, это требует клонирования данных, потому что я получаю данные из службы отдыха, как указано в документы - person Moatez Bouhdid; 15.01.2017