程序员经验分享-hwhale

angularjs 自定义过滤器检查数据数组内的值

2024-06-05

我有两个过滤器，它们根据数据中的队列键过滤数据。 这是我的代码：

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456'
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          if (term != null && !isFound) {
            term = term.toString();
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();
              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

      </tr>
    </table>
  </div>
</div>

过滤器工作完美。

但是如果我有这样的数据，其中队列位于数组内：

$scope.servers = [
    {name:'ServerA', queuearr:[{'queue' :'111'}]},
    {name:'Server7', queuearr:[{'queue' :'111'}]},
    {name:'Server2', queuearr:[{'queue' :'456'}]},
    {name:'ServerB', queuearr:[{'queue' :'456'}]},
];

注意：队列中可以有多个对象，例如 这：[{queue :'111'},{queue :'278'}]

如何更改当前代码，以便控件进入queuerr数组并匹配队列并相应地返回结果？


你有一些条件需要改变Angular.forEach看看解决方案。

服务器出现在两次搜索中

var app = angular.module('app', []);

app.controller('mainController', function($scope) {
  // Data object
  $scope.servers = [{
      name: 'ServerA',
      queue: '111'
    },
    {
      name: 'Server7',
      queue: '111'
    },
    {
      name: 'Server2',
      queue: '456'
    },
    {
      name: 'ServerB',
      queue: '456',
      queuearr: [{
        queue: '456'
      }, {
        queue: '111'
      }]
    },
  ];

  // Filter defaults
  $scope.Filter = new Object();
  $scope.Filter.queue = {
    'PAV': '111',
    'UAT': '456'
  };

});

// Global search filter
app.filter('searchFilter', function($filter) {
  return function(items, searchfilter) {
    var isSearchFilterEmpty = true;
    angular.forEach(searchfilter, function(searchstring) {
      if (searchstring != null && searchstring != "") {
        isSearchFilterEmpty = false;
      }
    });
    if (!isSearchFilterEmpty) {
      var result = [];
      angular.forEach(items, function(item) {
        var isFound = false;
        angular.forEach(item, function(term, key) {
          // change here to check for arrays
          if (term || Array.isArray(term) && !isFound) {
            // use JSON.stringify here
            term = JSON.stringify(term);
            term = term.toLowerCase();
            angular.forEach(searchfilter, function(searchstring) {
              searchstring = searchstring.toLowerCase();

              if (searchstring != "" && term.indexOf(searchstring) != -1 && !isFound) {
                result.push(item);
                isFound = true;
              }
            });
          }
        });
      });
      return result;
    } else {
      return items;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainController">
    <label>show 111</label>
    <input type="checkbox" ng-model="Filter.queue.PAV" ng-true-value='"111"' ng-false-value='"!111"' />&nbsp;
    <label>show 456</label>
    <input type="checkbox" ng-model="Filter.queue.UAT" ng-true-value='"456"' ng-false-value='"!456"' />&nbsp;

    <hr />

    <table width="100%" cellpadding="5">
      <tr>
        <th>Name</th>

        <th>Queue</th>

      </tr>
      <tr ng-repeat="server in servers | searchFilter:Filter.queue">
        <td>{{server.name}}</td>

        <td>{{server.queue}}</td>

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

javascript

angularJS

html

angularjsfilter

angularjs 自定义过滤器检查数据数组内的值 的相关文章

  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个

  • 如何在 joomla 模块中通过 javascript 发送输入文件类型

    我想将带有 javascript 的文件发送到 php 文件 我的 php 文件中有这个表单

  • Jquery 关注下一个带有类的元素

    我正在尝试创建一个函数 当按下 Enter 键时 会选择带有类的下一个输入 我已经设法 focus 同一行中的下一个元素 但是 如果我需要选择下一行的下一个输入 它将无法继续 下一行中的第一个 quantity 文本框需要获得焦点 控制台没

  • Javascript/Node 中从不执行用户代码的隐藏线程：是否可能，如果可能，是否会导致竞争条件的神秘可能性？

    根据评论 答案 请参阅问题底部的更新 这个问题实际上是关于可能性的hidden不执行回调的线程 我有一个关于潜在的神秘场景的问题 涉及节点请求模块 https www npmjs com package request其中 A 构建完整的

  • 如何使用 JavaScript 禁用滚动条？

    当我仅在 Internet Explorer 7 中显示代表模式窗口的 div 时 我需要锁定浏览器滚动条 谷歌搜索我发现我可以使用document body style overflow hidden 但这不适用于 IE7 我也尝试过do

  • javascript 代码只能在函数之外工作 - 为什么？

    为什么这段代码不能像下面写的那样工作 但如果我注释掉function testBgChange 并将代码保留在该函数内 它可以正常工作 如果我将代码保留在函数中然后调用该函数 会有什么区别

  • 透明、无边框文本输入

    如何删除周围的边框

  • 解析 PHP 响应：未捕获的语法错误：意外的标记 <

    我正在使用 AJAX 来调用 PHP 脚本 我唯一需要从响应中解析的是脚本生成的随机 ID 问题是 PHP 脚本会引发许多错误 这些错误实际上很好 不会妨碍程序功能 唯一的问题是当我跑步时 parseJSON response I get

  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自

  • 如何使网站适应用户的屏幕分辨率？

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能

  • 变量值的 swap() 函数[重复]

    这个问题在这里已经有答案了 我无法达到下面这个交换函数的预期结果 我希望将值打印为 3 2 function swap x y var t x x y y t console log swap 2 3 任何线索将不胜感激 您的函数正在内部交

  • 每次页面重新加载时都会出现新的 Google 登录库提示

    在我的项目中 我使用常规弹出客户端 JS 身份验证 平台客户端 https developers google com identity sign in web sign in 我从旧版 Google Sign 迁移到新版 Google I

  • 带有子节点的拖放区域

    我有一个带有多个子节点的拖放区域 主要元素有dropenter and dropleave事件 但是 如果您将文件拖动到主元素内部和子节点上方 则dropleave被触发 如何处理 以便dropleave仅当拖动的元素和鼠标位于主元素之外时

  • 禁用 iframe 中的滚动

    有没有办法在 iframe 中禁用所有滚动 我有一个 iframe 其中内容超出了 iframe 尺寸 设置scrolling no 只会删除滚动条 但不会禁用滚动 我无法控制 iframe html 的头部 所以我无法设计它的样式 有任何

  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它

  • Electron Auth0Lock“原始文件://不允许”

    尝试让 auth0 与我的电子应用程序一起使用 当我按照默认教程并尝试使用用户名 密码 身份验证进行身份验证时 锁定失败并显示 403 错误 并响应 不允许使用 Origin file 我还在 auth0 仪表板中客户端设置的允许来源 CO

  • JavaScript 点击事件在 Android 4.0.4 默认浏览器上的 Samsung Galaxy SIII 上不起作用

    我在 Android 4 0 4 上使用 Samsung Galaxy SIII 的默认浏览器时遇到了最奇怪的问题 对于以下页面 单击链接将不会触发 JavaScript 处理程序 从其中一个 div 的内容中删除单个 a 字母使它们再次工

  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi

  • HTML：JavaScript：阻止表单提交并调用 Javascript 函数

    我想在按下表单中的提交按钮时进行 AJAX 调用 事实上我无法删除

  • 在 Javascript 中动态创建 []array

    也许这将是一个真正愚蠢的问题 但我是 JavaScript 新手 并且坚持动态创建数组 如下格式 items Date 2012 01 21T23 45 10 280Z Value 7 Date 2012 01 26T23 45 10 28

随机推荐

热门标签