Question

我对智能桌很新。我已经查看了Smart Table的文档。但我还没有找到如何在智能表中绑定点击事件的数据？代码非常大，但我想在这里发布。

<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

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

向ng-repeat添加过滤器，并按照您在按钮点击时插入的模型进行过滤，如下所示：<tr ng-repeat="row in rowCollection | filter: searchQuery">
在您的视图中，将该模型（使用ng-model）添加到输入标记并在控制器中定义
然后在您单击搜索按钮

here's a plunk演示了这个

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

修改

好的，所以OP的一个大问题是，在分页时，过滤后的值不能正确显示，过滤器查询是从输入框中获取而不是使用事实上的st-search插件-in，所以我提到已经existing issue in github（similar），我已经提取了plunk和modified it slightly以适应受质疑的用例。

使用智能表搜索按钮单击事件的数据

1 个答案: