从字符串开头过滤 ng-repeat 元素

2024-05-07

我正在尝试 AngularJS,这是我的第一次尝试。我正在尝试使用“开头为”而不是“包含”之类的内容来过滤对象数组,但我不明白如何做到这一点。

假设我有一个elements像这样的数组

[{
  amount: 50
}, {
  amount: 25
}]

如果我想过滤5两条记录都会显示,而我只想显示第一个记录,即以5.

这就是我到目前为止为循环部分所做的事情(我还添加了排序和分页部分,即使可能不会影响我想要实现的目标)

<tr ng-repeat="element in elements | filter:search:strict | orderBy:predicate:reverse | filter:startFrom:currentPage*pageSize | limitTo:pageSize">
  <td>{{element.name}}</td>
  <td>{{hotel.amount}}</td>
</tr>

对于输入,我写下“5"

<input class="pull-right" ng-model="search.amount">

我不明白如何在这里创建自定义处理程序,以便我可以解析每个第 n 项并查看它是否以传递的数字开头。


我只会编写基本的自定义过滤器:

JS

var iApp = angular.module("App", []);

 iApp.filter('myfilter', function() {

   function strStartsWith(str, prefix) {
    return (str+"").indexOf(prefix) === 0;
   }


   return function( items, amount) {


    var filtered = [];

    angular.forEach(items, function(item) {
      if(strStartsWith(item.amount, amount)){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

    iApp.controller('TestController', function($scope)
    {   
       $scope.amount='';

       $scope.elements = [
         { amount: 50},
         { amount: 25 }];                
     }); 

HTML

<body data-ng-controller="TestController">

  <input class="pull-right" ng-model="amount">

        <table id="hotels">
            <tr data-ng-repeat="element in elements | myfilter:amount">
                <td>{{element.amount}}</td>
            </tr>
        </table>
        <br/>

    </body>

Demo Plunker http://plnkr.co/edit/4zIBlV20ysym3L0OhL3B?p=preview

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

从字符串开头过滤 ng-repeat 元素 的相关文章

随机推荐

  • Netbeans 中的方法必须调用 super() 错误

    最近我做了一个 Netbeans 项目 并使用 SVN 来配合它 我看到重复的类错误 并在控制台中显示 java lang VerifyError class pie chart explorer PieChartExplorer meth
  • 将可为空的数字转换为字符串

    我想将可为空的数字转换为字符串维持空值 这就是我正在做的 int i null string s i null null i ToString 有更短的吗 您可以编写一些扩展方法 public static string ToNullStr
  • 如何连接flutter到localhost mysql数据库

    我想将本地主机 mysql 数据库连接到 flutter 但我没有这样做 我尝试了 mysql1 与这些连接 ConnectionSettings host 10 0 2 2 port 3306 user root password roo
  • 如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?

    在我的 MVC 项目中 我有一个与 Knockout 绑定的 HTML 表 我正在尝试将表格导出到 Excel 我在客户端尝试使用 JavaScript self exportToExcel function javascript wind
  • 用户在 Rails 中选择 CSS 样式表

    我正在 Rails 中开发一个网站 我希望用户能够将 CSS 样式表更改为浅色或深色主题 我认为这样我就可以为样式表使用变量 我尝试通过在我的视图中添加一个链接来更改该变量 如下所示 在我的控制器中调用此函数 class ProjectsC
  • Firefox 渲染出错 - 看到一些非常奇怪的东西

    我的以下情况真的很奇怪 基本上 当我查看页面的源代码时 一切看起来都很好 但页面看起来完全错误 所以我决定使用 firebug 查看源代码 而 firebug 显示了一个非常不同的故事 但是 如果我刷新页面 页面看起来很好 并且源和萤火虫匹
  • 如何让 XSLT 在 Java 中返回 UTF-8

    我正在尝试让我的 XSL 脚本使用 UTF 8 编码 像 和希腊字符这样的字符就像垃圾一样出现 让它工作的唯一方法是将结果写入文件 如果我将它写入输出流 它只会返回垃圾 System out 有效 但这可能是因为它被重定向到文件 结果需要从
  • 初始化顺序是否有保证

    我正在使用类似以下代码段的内容来进行一些初始化 我知道初始化p
  • 使用 gatttool 或 bluepy BLE 订阅通知

    我正在使用 bluepy 编写一个程序 用于监听蓝牙设备发送的特征 我还可以使用任何库或语言 唯一的限制是在 Linux 上运行 而不是在移动环境中运行 似乎仅在移动设备中广泛使用 没有人在桌面上使用 BLE 使用 bluepy 我注册了委
  • 在 C/C++ 中调用 MATLAB API

    我刚刚从某处听说 对于数值计算 MATLAB 确实提供了一些用户友好的 API 如果你在 C C 代码中调用这些 API 你可以显着加快计算速度 但我在MATLAB文档中没有找到这样的信息 例如http www mathworks com
  • Rails 4/5 发送动态 ActionMailer::Base.mail 电子邮件,附件标记为 Noname

    我看过类似的帖子 主要涉及通过创建视图和控制器来发送附件 例如 电子邮件中的 PDF 附件称为 Noname https stackoverflow com questions 12816042 pdf attachment in emai
  • 更新 Swagger code-gen 生成的代码

    我在 spring 中使用 swagger codegen 从 swagger yaml 文件生成了代码 现在 我已经更新了 API 的 swagger yaml 文件 并添加了更多 HTTP 操作 是否可以更新之前自动生成的现有代码 而无
  • C++标准API

    我是一名学生 也是 C 新手 我正在寻找与 Java API 一样全面的标准 C API 到目前为止我一直在使用cplusplus com http www cplusplus com and cppreference com https
  • Django - render()、render_to_response() 和 direct_to_template() 之间有什么区别?

    两者之间的视图有什么区别 用 python django 新手可以理解的语言 render render to response and direct to template 例如从Nathan Borror 的基本应用程序示例 https
  • 为什么 Webpack 忽略我的 CSS 文件?

    我正在尝试让 webpack 将我的 CSS 文件 使用 PostCSS 编译为单独的文件 从文档来看 这似乎正是 ExtractTextPlugin 应该做的 但是 我无法让 webpack 对我的 CSS 文件执行任何操作 相关项目结构
  • 改造上传图片

    我正在使用 Retrofit v 2 2 0 将图片上传到我的服务器 但服务器返回一个空值 表示尚未上传图像 日志显示图片已上传 上传时文件名正确 在邮递员中它仍然有效 这可能是什么问题 上传个人资料图片 java public class
  • 如何让div垂直展开以将内容包裹在其中?

    我有一个 div 其中包含许多动态生成的图像 我不知道图像列表有多高 我的问题是包含动态生成的图像的 div 的行为不像它容纳任何内容 我希望它扩展到图像列表的高度 每个图像本身都包含在一个 div 中 这是包装 div block pad
  • 更改 Android XML 中的形状颜色

    我有 android 绘图 我将应用到几个 TextView 的背景
  • 如何从另一个 JSF 页面按下某个按钮返回到同一个 JSF 页面

    我有两个 JSF 页面 假设 A 和 B 从这两个页面 A 和 B 我可以导航到页面 C 现在页面 C 中有一个按钮 确定按钮 单击它应该导航回 A 或 B 具体取决于从哪里 A 或 B 调用页面 C 任何帮助将不胜感激 利用视图参数的解决
  • 从字符串开头过滤 ng-repeat 元素

    我正在尝试 AngularJS 这是我的第一次尝试 我正在尝试使用 开头为 而不是 包含 之类的内容来过滤对象数组 但我不明白如何做到这一点 假设我有一个elements像这样的数组 amount 50 amount 25 如果我想过滤5两