javascript - 使用智能表搜索按钮点击事件的数据

Question

我对智能 table 很陌生。我已经浏览了其关于 Smart Table 的文档。但是我还没有找到如何在智能表中绑定(bind)点击事件的数据？代码非常大，但我想将其发布在这里。

<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
  <div class="crawlhealthshowcontent">
    <div class="crawlhealthshowcontent-right">
      <input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
      <a class="bluebtn">Search</a>
    </div>
    <div class="clearfix"></div>
  </div>
  <br />
  <div class="table-header clearfix">
    <div class="row">
      <div class="col-sm-6_5">
        <div st-sort="SourceUrl" st-skip-natural="true">
          Page URL
        </div>
      </div>
      <div class="col-sm-2">
        <div st-sort="SourceAnchor" st-skip-natural="true">
          Anchor Text
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="ExternalLinksCount" st-skip-natural="true">
          External<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="InternalLinksCount" st-skip-natural="true">
          Internal<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="IsFollow" st-skip-natural="true">
          Type
        </div>
      </div>

    </div>
  </div>
  <div class="table-body clearfix">
    <div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
      <div class="col-sm-6_5">
        <div class="pos-rel">
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
        </div>
      </div>
      <div class="col-sm-2">
        <div class="pos-rel">
          {{ backlink.SourceAnchor }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.ExternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.InternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div ng-if="!backlink.IsFollow">
          No Follow
        </div>
      </div>
    </div>
    <div class="row" ng-if="backlinks.length == 0">
      No backlinks exists for selected location.
    </div>
  </div>
  <div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>

我的js代码在这里。

module.controller('backlinksController', [
  '$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
  function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {

    $scope.dataExistsValues = globalVariables.dataExistsValues;

    var initialize = function () {
      $scope.backlinks = undefined;
      $scope.sortOrderAsc = true;
      $scope.sortColumnIndex = 0;

    };

    initialize();

    $scope.itemsByPage = 5;

    var updateTableStartPage = function () {
      // clear table before loading
      $scope.backlinks = [];
      // end clear table before loading

      updateTableData();
    };

    var updateTableData = function () {

      var property = mcatSharedDataService.PropertyDetails();
      if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
        return;
      }
      var params = {
        PropertyId: property.Primary.PropertyId
      };

      var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);

      $scope.Loading = backLinksDataPromise;
    };

    mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
  }
]);
module.filter('myStrictFilter', function ($filter) {
  return function (input, predicate) {
    return $filter('filter')(input, predicate, true);
  }
});

但是在文本框上直接搜索它工作得很好。但根据要求我必须在单击按钮时执行它。我们将不胜感激您的建议和帮助。提前致谢。

Answer 1

您可以通过进行一些简单的调整来搜索特定行。

1. 向 ng-repeat 添加过滤器，然后按您将在单击按钮时插入的模型对其进行过滤，如下所示:<tr ng-repeat="row in rowCollection | filter: searchQuery">
2. 在您的 View 中，将该模型(使用 ng-model )添加到输入标记并在 Controller 中定义它
3. 然后在单击搜索按钮时将值传递给过滤器

here's a plunk这证明了这一点

您可以使用filter:searchQuery:true严格搜索

编辑:

好的，所以OP的大问题是分页时过滤后的值无法正确显示，过滤器查询是从输入框中获取的，而不是使用事实上的st-search插件，所以我引用了一个已经existing issue in github ( similar )，我已经把这个 plunk 拿出来了和 modified it slightly以适应所质疑的用例。