程序员经验分享-hwhale

当搜索过滤器值从 javascript 更改时，智能表不会更新[重复]

2023-12-31

我在用角度智能桌 https://github.com/lorenzofox3/Smart-Table。当我使用 st-search 指令的搜索过滤器时，当我从 javascript 表更改其值时，不会得到更新。这是我的代码

这是我的控制器

angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', '$timeout',
    function ($scope, $timeout) {

        var nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'];
        var familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];

        $scope.isLoading = false;
        $scope.rowCollection = [];


        function createRandomItem() {
            var
                firstName = nameList[Math.floor(Math.random() * 4)],
                lastName = familyName[Math.floor(Math.random() * 4)],
                age = Math.floor(Math.random() * 100),
                email = firstName + lastName + '@whatever.com',
                balance = Math.random() * 3000;

            return {
                firstName: firstName,
                lastName: lastName,
                age: age,
                email: email,
                balance: balance
            };
        }

        $scope.columns = ['firstName', 'lastName', 'age', 'email', 'balance'];

        for (var i = 0; i < 10; i++) {
            $scope.rowCollection.push(createRandomItem());
        }

        $scope.changeSearch = function () {
            document.getElementById('firstName').value = '';
        };

    }
]);

这是html

<body ng-controller="mainCtrl">
<div class="table-container">
    <table st-table="rowCollection" class="table table-striped">
        <thead>
            <tr>
                <th ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
            </tr>
            <tr>
                <th>
                    <input st-search="firstName" id="firstName" 
                           placeholder="search for firstname"
                           class="input-sm form-control"
                           type="search" />
                </th>
                <th colspan="4">
                    <input st-search placeholder="global search" 
                           class="input-sm form-control"
                           type="search" />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in rowCollection">
                <td ng-repeat="col in columns">{{row[col]}}</td>


            </tr>
        </tbody>
    </table>

    <button ng-click="changeSearch()">Change Search</button>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>


<script src="angular.min.js"></script>
<script src="smart-table.min.js"></script>
<script src="app2.js"></script>

我采取了一个按钮，并在其单击方法上更改搜索过滤器值，其值发生变化，但表没有被过滤。 需要帮忙？是否可以通过代码更改搜索过滤器值？


要使用按钮触发过滤器，您需要创建一个自定义指令.

您不应该在控制器中使用 DOM 操作。要操作 DOM 值，您可以使用ngModel. 

<input st-search="firstName" id="firstName" 
       placeholder="search for firstname" class="input-sm form-control"
       type="search" ng-model="firstName" />

然后改变你的changeSearch函数：

    $scope.changeSearch = function () {
        ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶f̶i̶r̶s̶t̶N̶a̶m̶e̶'̶)̶.̶v̶a̶l̶u̶e̶ ̶=̶ ̶'̶'̶;̶
        $scope.firstName = 'Ghazanfar';
    };

您仍然需要创建自定义指令来触发过滤器。因为这是您可以用来获取智能表实例的唯一方法。 （AFAIK）

这是提交按钮指令的示例。

(function() {

  "use strict";

  angular
    .module('st-submit-search', ['smart-table'])
    .directive('stSubmitSearch', function () {
      return {
        restrict: 'EA',
        require: '^stTable', // to get smart-table as dependency
        link: function(scope, element, attrs, ctrl) {
          // ctrl is smart-table instance
          element.bind('click', function(evt) {
            scope.$apply(ctrl.pipe());
          });
        }
      };
    });
})();

然后使用您认为的指令：

<button st-submit-search ng-click="changeSearch()">Change Search</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

filter

smarttable

当搜索过滤器值从 javascript 更改时，智能表不会更新[重复] 的相关文章

随机推荐

  • Javascript 中如何检测对象是否已被垃圾回收？

    我正在构建一个 JavaScript 游戏 它创建一个Level使用 var 的对象 function start var myGameLevel new Level 2 This Levelobject 有很多功能 主要是向 DOM 添加

  • C++ 函数模板，未定义的架构符号[重复]

    这个问题在这里已经有答案了 有人可以向我解释为什么以下内容无法编译吗 希望我错过了明显的事情 函数 hpp template

  • 防止 Sympy 重新排列方程

    也许我忽略了显而易见的事情 但是如何防止 sympy 重新排列方程呢 我在 iPython 笔记本中使用 Sympy 因此我可以轻松地将 Latex 代码复制粘贴到 Lyx 但我希望方程的顺序与我定义的顺序相同 例如 灰体辐射与其温度的关系

  • 列出 SQL Server 2012 架构中所有表的名称

    我在 SQL Server 2012 中有一个架构 是否有一个命令可以在 SQL 中运行来获取该架构中由用户填充的所有表的名称 我知道 MySQL 有一个类似的查询SHOW TABLES 但这不适用于 SQL Server 你真的应该使用I

  • 访客模式：遍历客户端或访客中的树元素

    早上好 stackoverflow 我目前正在 AST 之类的东西上实现访问者模式 现在我的问题是 如何迭代元素 我认为将对象返回给访问者并让访问者从那里开始遍历更符合逻辑 因为当您想以不同的方式遍历对象时 您可以保持灵活性 另一方面 人们

  • FIRAnalyticsConnector：为 Mac Catalyst 构建，但在为 iOS Simulator 构建的目标文件中链接

    当尝试使用 Catalyst 为 Mac 构建时 我收到以下构建错误 FIRAnalyticsConnector FIRConnectorUtils 77ff1e12be6740765c87f1be0d421683 o building f

  • Terraform databricks 无法配置默认凭据

    我们正在通过 Azure 管道运行 terraform 以创建 databricks 工作区和相关资源 但是当 Terraform 的应用阶段到达获取最新版本的 Spark 的阶段时 该过程会引发错误 错误是 Error default a

  • 自动目录树更新

    我不确定这是否可能 但我希望在编译过程中将多个 rst 文件放入一个目录中 我希望这些文件自动插入到toctree 我该怎么办 您可以使用glob启用通配符的选项 像这样 toctree glob 这会将同一目录中的所有其他 rst 文件添

  • 如何区分提交与其父提交

    除了编写别名或脚本之外 是否有更短的命令来获取特定提交的差异 git diff 15dc8 15dc8 如果您只提供单个提交 IDgit diff 15dc8 它与针对 HEAD 的提交不同 Use git show COMMIT 它将向您

  • 可以突出显示街道的一部分吗？

    我需要突出显示两个十字路口之间的街道部分 我发现一年多前就有人提出过类似的问题 请参阅here https stackoverflow com questions 2155032 highlighting whole street with

  • Kotlin 中的 Swift 'if let' 语句等效项

    在 Kotlin 中是否有与下面的 Swift 代码等效的代码 if let a b val else 您可以使用let 函数如下 val a b let If b is not null run If b is null 请注意 您需要调

  • 将双变量视为布尔值

    测试 double 变量是否等于 0 的更好方法 效率 最佳实践 是什么 1 if a double else OR 2 if a double 0 else 第二个通常更好 更明确地说明您正在做什么 我通常更喜欢if a double 0

  • Zend Framework：如何将旧路由 301 重定向到新的自定义路由？

    我有大量旧路线 需要将其重定向到新路线 我已经在 Bootstrap 中定义了我的自定义路由 protected function initRoutes router Zend Controller Front getInstance gt

  • 如何将模板添加到 Kendo 网格工具栏

    我正在尝试将自定义模板添加到 Kendo MVC 网格 我的模板应该包含两件事 创建按钮以将新记录添加到网格中 自动完成框用于过滤网格中的数据 我正在尝试以下代码 ToolBar toolbar gt toolbar Template

  • 启用/禁用每个控制器/操作方法的会话状态

    我们正在构建一个 ASP NET MVC 应用程序 该应用程序将部署在支持缓存等功能的硬件负载平衡器后面 我们的建议是手动定义负载均衡器应缓存哪些 URL 模式 这对我们来说将是一个相当简单的过程 因为我们有相对静态的 目录 页面 然后是非

  • 将文本绕成 svg 或 canvas 中的圆形

    将文本适合网站上的圆圈 使其随圆圈的曲线流动而不是矩形边界框的一个好的解决方案是什么 这就是我想要实现的目标 页面上有许多黑色圆圈 固定大小 每个圆圈旁边都有一个文本区域 当文本输入到文本区域时 它会出现在黑色圆圈中 以两个轴为中心 如果输

  • Python - 检查字符串是否包含列表中的任何元素

    我需要检查字符串是否包含列表的任何元素 我目前正在使用这个方法 engWords the a and of be that have it for not engSentence the dogs fur is black and whit

  • AngularJS 发送 OPTIONS 请求而不是 POST

    我正在尝试将图片上传到我的 S3 存储桶 我正在使用 AngularJS v1 2 13 当我使用他们的文档中显示的简单案例时 使用以下命令提交表单 action标签 一切正常 但是 如果我想用 Angular 的方式来做ng clickA

  • 优化磁盘IO

    我有一段代码可以分析来自非常大 10 100GB 二进制文件的数据流 效果不错 是时候开始优化了 目前磁盘IO是最大的瓶颈 使用的文件有两种类型 第一种类型的文件由 16 位整数流组成 在 I O 后必须对其进行缩放 以转换为具有物理意义的

  • 当搜索过滤器值从 javascript 更改时，智能表不会更新[重复]

    这个问题在这里已经有答案了 我在用角度智能桌 https github com lorenzofox3 Smart Table 当我使用 st search 指令的搜索过滤器时 当我从 javascript 表更改其值时 不会得到更新 这是

热门标签