Фильтрация в AngularJS таблица не работает - PullRequest
0 голосов
/ 16 апреля 2020

Я новичок в AngularJS, поэтому я не совсем знаком с тем, как все работает, но у меня есть настройка ngtable, которую я пытаюсь отфильтровать на основе текстового поля поиска ввода над таблицей. 'Searchtext' передается через строку queryParam. Однако я не могу понять, почему он не фильтрует. Сортировка всех данных в таблице работает нормально. Буду признателен за любые ваши отзывы. Я думаю, что проблема заключается в моем обслуживании. Должен ли я принимать строку queryParam в нем?

Спасибо!

Обновление

Любая дополнительная информация, которую я могу предоставить для помощи?

Возвращающиеся данные находятся в массиве. Вместо того, чтобы передавать queryParams обратно в базу данных для фильтрации данных, я хотел бы просто отфильтровать данные в ngtable. Все данные уже содержатся в $ scope.data

HTML

        <div class="row" style="margin: 20px 0px 20px 0px">
          <div class="col-md-6">
            <form class="form-inline" style="white-space:nowrap;">
              <div class="form-group has-feedback">
                <label class="sr-only" for="videoSearch" translate="SEARCH_TXT"></label>
                <input type="search" ng-model="learnVideos.searchtext" class="form-control" id="videoSearch" translate translate-attr-placeholder="SEARCH_TXT" ng-change="videoTableParams.reload()">
                <i class="fa fa-search form-control-feedback"></i>
              </div>
            </form>
          </div>

NGTABLE

    $scope.learnVideos = {
        searchtext: ''
      };
    // Table view for listing videos
      $scope.totalVideosDisplaying = 0;
      $scope.totalVideosRecCount = 0;
      $scope.videoTableParams = new NgTableParams({
        page: 1,
        count: 10,
        sorting: { videoName : "asc" }
      }, {
          total: $scope.totalVideosRecCount,
          getData: function (params) {
          $scope.actionInProgress.get = true;

          var sortString = '';
          angular.forEach(params.sorting(), function (value, key) {
            var column = key.replace('$', '.');
            if (sortString == '')
              sortString += column + '=' + value;
            else
              sortString += '&' + column + '=' + value;
          });
          var queryParam = 'Page=' + params.page() +
            '&Count=' + params.count() + '&sort=' + encodeURIComponent(sortString) + '&searchtext=' + 
    $scope.learnVideos.searchtext;

          return learnVideoService.getVideos(queryParam).then(function (data) {
            // Success Callback
            $scope.actionInProgress.get = false;
            $scope.totalVideosRecCount = data.totalRecCount;
            params.total($scope.totalVideosRecCount);
            $scope.data = data.videoLearningList;
            $scope.data = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : 
     $scope.data;
            $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : 
     $scope.data;

            $scope.data = $scope.data.slice((params.page() - 1) * params.count(), params.page() * 
    params.count());
            $scope.pagedVideos = $scope.data;
            $scope.totalVideosDisplaying = $scope.pagedVideos.length;
            return $scope.pagedVideos;
          }).catch(function (error) {
            // Error Callback
            $scope.actionInProgress = false;
          });
        }
      });

Сервис

define(['app', 'URI', 'staticData'], function (app, URI, staticData) {
  app.service('learnVideoService', ['$http', '$q', function ($http, $q) {
    var service = {};
    // Get Videos
    function getVideos() {
      var url = new URI(staticData.apiPaths.learning.learningItems);
      var deferred = $q.defer();
      $http.get(url.toString()).success(function (data) {
        deferred.resolve(data);
      }).error(function (errorcode, errormessage) {
        $q.reject(errorcode, errormessage);
      });
      return deferred.promise;
    }

    service = {
      getVideos: getVideos
    };

    return service;

  }]);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...