多列中的AngularJS智能表搜索

时间:2015-03-01 09:31:35

标签: angularjs smart-table

Smart-table具有内置功能,可以搜索所有列(st-search)或通过一个所需列(st-search ="' firstName')。是否可以在多个列(不是全部)中进行搜索? 示例:如果我有这样的表:名称,昵称,包含此类数据的地址:

  1. John,JJ,Some address
  2. 史蒂夫,约翰,也致辞
  3. Jane,Jane,John-village
  4. 并搜索' John'结果只有前两列。 有可能吗?

5 个答案:

答案 0 :(得分:4)

我有类似的问题,我使用此post中的提示解决了问题。

Smart Table doc说:

  

stSetFilter取代了在智能搜索时使用的过滤器   表。当stSearch的默认行为不符合您的要求时   需求,就像在一个条目中,一个条目是另一个条目的子串,   使用自定义过滤器来实现您的目标。

  

请注意,选择正确显示需要st-safe-src   集合中的所有不同元素。应该省略,   select也只包含表中可见元素的值   受传呼影响。

您可以在HTML中的table元素中声明自己的过滤器:

<table ... st-set-filter="myCustomFilter" class="table table-striped">

...您可以通过谓词函数自定义过滤器(在您的应用中)。它可以这样工作:

// filter method, creating `myCustomFilter` a globally
// available filter in our module
.filter('myCustomFilter', ['$filter', function($filter) {

  // function that's invoked each time Angular runs $digest()
  return function(input, predicate) {
    searchValue = predicate['$'];
    //console.log(searchValue);
    var customPredicate = function(value, index, array) {
      console.log(value);

      // if filter has no value, return true for each element of the input array
      if (typeof searchValue === 'undefined') {
        return true;
      }

      var p0 = value['name'].toLowerCase().indexOf(searchValue.toLowerCase());
      var p1 = value['nickname'].toLowerCase().indexOf(searchValue.toLowerCase());
      if (p0 > -1 || p1 > -1) {
        // return true to include the row in filtered resultset
        return true;
      } else {
        // return false to exclude the row from filtered resultset
        return false;
      }
    }

    //console.log(customPredicate);
    return $filter('filter')(input, customPredicate, false);
  }
}])

我做了这个小plnkr来查看操作中的过滤器

答案 1 :(得分:1)

不,解决方法是创建自己的指令,该指令需要表控制器并调用其api两次(随着搜索的添加)

directive('stSearch', ['$timeout', function ($timeout) {
    return {
        require: '^stTable',
        scope: {
            predicate: '=?stSearch'
        },
        link: function (scope, element, attr, ctrl) {
            var tableCtrl = ctrl;

            // view -> table state
            element.bind('input', function (evt) {
                evt = evt.originalEvent || evt;
                tableCtrl.search(evt.target.value, 'column1');
                tableCtrl.search(evt.target.value, 'column2');
            });
        }
    };
}]);

您可以在stSearch direcitve

中找到更多详细信息

答案 2 :(得分:0)

您可以通过创建新的启用搜索的表格并将您可能显示在一栏中的字段组合在一起来解决此问题。 例如:如果在一个列中将IdNo1和IdNo2作为视图字段,则可以将它们组合以在表数组中添加新元素。

查看:

表注入:

table st-table="displayedCollection" st-safe-src="rowSearchCollection"

搜索注入

input type="search" ng-model="idSearch" st-search="idSearch" 

控制器:

$scope.rowSearchCollection = [];
vm.searchEnabledTable = function(tableDetails) {
    //$scope.rowSearchCollection = angular.copy(tableDetails); 
    var deferred = $q.defer();              
      if(_.isArray(tableDetails)) {
          _.each(tableDetails, function(element, index, list) {
            $scope.rowSearchCollection[index] = angular.copy(element);
            $scope.rowSearchCollection[index].idSearch = element.IdNo1+','+element.IdNo2;


          });
          deferred.resolve("DATA_PROCESSED");
      } else {
          deferred.reject("NOT_ARRAY");
      }             
      return deferred.promise;
}

答案 3 :(得分:0)

stSetFilter的问题在于新过滤器将应用于所有 搜索(st-search),您将在表格中使用该搜索。

另一个想法: 如果您的资料rowCollection不太大, 在页面的init()中的javascript中,执行以下操作:

self.rowCollection.forEach(函数(元素){

element.NameForFilter = element.name +''+ element.nickName;
});

,然后在第th个输入中: st-search = NameForFilter

答案 4 :(得分:-1)

尝试st-search =&#34; {{firstName + nickname}}&#34;。我尝试使用智能表v2.1.6并且似乎正在工作。