smart-table - 如何重置过滤器集合?

2023-12-26

Angular 和智能表新手..

此智能表设置可以正常工作并正确过滤,但尝试重置或清除过滤器不会重新过滤表。为什么不?

使用 ng-model 绑定更新输入是否不会触发 smart-table 正在寻找的监视?

Plunker 可以在这里找到:http://plnkr.co/edit/4os3oWeJtEtMfa89QoQd?p=preview http://plnkr.co/edit/4os3oWeJtEtMfa89QoQd?p=preview

Code:

        var actionQueue = [
            { Type: 'User Access Request', Description: 'test test test test test test test', DateRequested: '5/5/15' },
            { Type: 'User Access Request', Description: 'blah blah', DateRequested: '3/3/10' },
            { Type: 'Project Approval Request', Description: 'project needs approving', DateRequested: '1/1/08' }
        ];

        $scope.actionQueueCollection = actionQueue;


        $scope.predicates = [{ Name: 'All', Value: '' }, { Name: 'User Access Request', Value: 'User Access Request' }, { Name: 'Project Approval Request', Value: 'Project Approval Request' }];
        $scope.selectedPredicate = $scope.predicates[0];

        $scope.clearFilter = function () {
            $scope.selectedPredicate = $scope.predicates[0];
            $scope.searchFilter = '';

        }

Markup:

    <table st-table="actionQueueCollection" >
        <thead>
            <tr>
                <th>
                    <div>
                        <label class="col-sm-1 control-label" for="filterType">Filter: </label>
                        <div class="col-sm-8">
                            <select class="form-control input-sm" id="filterType" name="filterType" ng-model="selectedPredicate" ng-options="predicate.Name for predicate in predicates track by predicate.Value" st-search="Type"></select>
                        </div>
                    </div>
                </th>
                <th colspan="3">
                    <div class="form-horizontal form-group-sm">
                        <div class="input-group col-sm-12">
                            <input st-search placeholder="search" class="form-control input-sm" type="search" ng-model="searchFilter" />
                            <button type="button" class="btn-sm btn-default" ng-click="clearFilter()">CLEAR</button>
                        </div>
                    </div>
                </th>
            </tr>
            <tr>
                <th>Type</th>
                <th>Description</th>
                <th>Date Requested</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="action in actionQueueCollection">
                <td>{{action.Type}}</td>
                <td>{{action.Description}}</td>
                <td>{{action.DateRequested}}</td>
            </tr>
        </tbody>
    </table>

几乎是一样的事情。 这样使用起来更容易一些

.directive("stResetSearch", function() {
         return {
                restrict: 'EA',
                require: '^stTable',
                link: function(scope, element, attrs, ctrl) {
                  return element.bind('click', function() {
                    return scope.$apply(function() {
                      var tableState;
                      tableState = ctrl.tableState();
                      tableState.search.predicateObject = {};
                      tableState.pagination.start = 0;
                      return ctrl.pipe();
                    });
                  });
                }
              };
    })

然后用法是这样的

<button type="button" st-reset-search>Clear Filters</button>

在这里找到:https://github.com/lorenzofox3/Smart-Table/issues/164 https://github.com/lorenzofox3/Smart-Table/issues/164

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

smart-table - 如何重置过滤器集合? 的相关文章

  • 关闭特定url上的AngularJS窗口

    我是 angularjs 的新手 所以这个问题对于经验者来说可能看起来很愚蠢 但我真的无法执行此操作 任何人都可以告诉我如何在到达特定网址后从 webview 返回到应用程序 就像我正在打开一个浏览器中的窗口用于支付过程 所以我需要的是 当
  • 项目组织和命名约定

    这在某种程度上是后续每个模块组件重复模块名称 https stackoverflow com questions 25005897 repeating module name for each module component问题 我们决定
  • 需要参考$log.log调用行号

    当我使用 Angular log 服务时 控制台中的所有行都会显示对 angular js 5687 的引用 而不是我调用 log log 函数的行 如何获得对我调用 log 的行的引用 另外 我有自己的围绕 log 的服务 如何引用对我的
  • 角度 ui-grid 自定义标题 html

    我正在尝试将 glyphicon glyphicon thlist 我可以单击并调用控制器函数 添加到默认标题的左侧 我采用了默认标头并尝试操纵它来执行此操作 默认标头位于 https raw githubusercontent com a
  • 在父指令和子指令之间传递参数

    我有导航菜单的父指令和菜单链接的子指令 像这样的事情 menu menu
  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • 如何将函数处理程序从控制器传递到 AngularJs 中的指令隔离范围?

    我在控制器中有以下功能 angular module app controller BodyController function this click function message alert message 我想将此函数传递到指令的
  • AngularJS 中的重定向状态

    这是状态配置 angular module grabhutApp config function stateProvider urlRouterProvider stateProvider ACCOUNT state account abs
  • AngularJS limitTo 按最后 2 条记录

    可以结合AngularJS吗filter https docs angularjs org api ng filter filter order https docs angularjs org api ng filter orderBy
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • AngularJS 不再在 Firebug 控制台中显示特定错误

    我在我的应用程序中使用 AngularJS 和 Angular Material 库 问题是 每当控制器的任何功能发生任何错误时 它都不会显示特定的错误 而是每次都会显示相同的一般错误 通过查看这些错误 您无法确定出了什么问题 这是我的控制
  • Angular 指令,属性更新时不调用链接

    在以下示例中 http plnkr co edit OZjg6sUgl35GIriaabQg p preview http plnkr co edit OZjg6sUgl35GIriaabQg p preview 我有 2 个指令 show
  • 在 Angular 中加载脚本和资源时实现加载器动画的最佳方法是什么?

    我希望向我的 Web 应用程序的用户显示一个进度条 指示加载所需文件和脚本的当前进度 最好显示百分比 但简单的加载器 gif 是一个可以接受的解决方案 如果可能的话 实现一个可以显示 Angular 中图像 CSS 和 JS 加载完成百分比
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 根据用户是否经过身份验证隐藏或显示链接 - AngularJs

    我目前正在研究一个AngularJS应用程序中 我遇到了以下障碍 我们有一个login当用户提交页面时 我们调用 Web api 并对用户进行身份验证 我们目前正在使用声明身份验证来设置 cookie 等 这些内容按预期工作 但是我遇到的问
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • AngularJS 使用 PUT 上传图像,可能,如何?

    我正在尝试使用 AngularJS 通过 PUT 或 Post 请求上传图像 这可能吗 如果可以的话 下面如何不更改标头 仍然是 json 并且没有有效负载 这是我尝试过的 在我的控制器中 scope uploadFile function
  • AngularJS 指令 - 设置多个指令元素的顺序(不是指令的优先级,而是元素的优先级)

    考虑带有指令 foo 的标记 div div div div div div 使 foo 按指定顺序而不是从上到下 3 1 2 运行的好方法是什么 我唯一能想到做的就是跟踪已运行的内容并在不按顺序的项目上返回 false 然后让 Angul
  • 如何使用 AngularJS、Devise 和 UI Router 全局实现身份验证?

    我对 Angular 很陌生 所以这可能是一个新手问题 我正在尝试实现一个简单的任务管理器 只是一个练习 以 Rails 作为后端 以 Angular 作为前端 到目前为止 我遵循了教程 一切正常 现在我想在全球范围内实施身份验证 这意味着
  • 使用 eclipse IDE 配置 angularjs

    我想开始使用 AngularJs 和 Java Spring 进行开发 我使用 Eclipse 作为 IDE 我想配置我的 Eclipse 以使这些框架无缝工作 我知道我可能要求太多 但相信我 我已经做了很多研究 你们是我最后的选择 任何帮

随机推荐