从字符串开头过滤 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 元素 的相关文章

  • Nervgh Angular 文件上传 - 如何限制文件格式为 jpeg 和 png?

    我正在升级使用 nv file select 指令的应用程序 我不确定如何限制支持上传的文件格式 您想要按照中所述使用过滤器文档 https github com nervgh angular file upload wiki Module
  • 错误 11 秒后等待 Protractor 与页面同步超时

    我的量角器测试有问题 我的角度应用程序使用 timeout 不断从服务器轮询某些内容 不幸的是 当我运行测试时 这会导致以下错误消息 There was a webdriver error Error Timed out waiting f
  • angular.js ui + bootstrap typeahead + 异步调用

    我将 typeahead 与 angular js 指令一起使用 但填充自动完成的函数进行了异步调用 我无法返回它来填充自动完成 有没有办法让它与这个异步调用一起工作 我可以假设您正在使用 Bootstrap 2 x 的 typeahead
  • TinyMCE 脏标志未设置或在编辑器离开后自动重置?

    配置 TinyMce 编辑器和一些功能后 如果用户进行了更改但没有保存 我现在想警告用户 为此 我正在检查 Blur 的脏标志 但它总是被设定的false 控制器 js this scope tinymceOptions selector
  • 如何在指令模板中使用动态 ng-show 值?

    我正在学习 Angular 并且尝试通过使用 Angular 指令来减少执行一些常见操作 例如显示错误消息 所需的代码 我想创建的一个指令是这样的
  • 如何在AngularJS中的控制器之间共享数据

    我目前正在尝试学习 angularJS 但在控制器之间访问数据时遇到问题 我的第一个控制器从我的 api 中提取货币列表并将其分配给 scope currencies 当我单击编辑时 应该发生的情况是它切换使用另一个控制器的视图 现在 当使
  • 如何在下拉列表中选择一个选项

    我正在使用 AngularJS 指令 我需要在模板中设置下拉列表的选定选项
  • Chrome 版本 58 的 Redactor 编辑器文本格式问题

    我们正在使用编辑器 https imperavi com redactor https imperavi com redactor 版本 10 1 1 并且由于对项目的大量依赖而未迁移到 Redactor II 最近 我们在 Chrome
  • Angular js 服务器端过滤器和分页

    我有几个输入字段 我们可以使用带有搜索名称的输入字段作为示例 当有人在该字段中输入内容时 我希望能够过滤对象的结果 但我想做过滤器服务器端而不是客户端 我有一个包含大量记录的数据库 因此我不想返回所有记录并在客户端进行过滤 这确实会减慢速度
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • PHPExcel下载文件

    我想下载使用 PHPExcel 生成的 Excel 文件 我按照以下代码PHPExcel 强制下载问题 https stackoverflow com questions 26265108 phpexcel force download i
  • 带有 ui-router 的 Angular 无限摘要循环

    我最初试图解决的问题是 如果用户未登录 则将用户重定向到登录页面 反之亦然 我用下面的代码做到了这一点 run function rootScope http AppService state rootScope on applicatio
  • 如何使用 $resource 获取状态代码?

    我提出请求的工厂在这里 angular module myapp factory testResponse http resource AppConfig routeParams rootScope function http resour
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • 使用多个值过滤 JFX TableView

    我目前正在尝试过滤我的数据TableView using FilteredList with predicate 我有2个ComboBoxes来过滤值 我的表包含Result Each Result has a Student that S
  • 为什么我无法将 $location 注入到我的 config() 中?

    为什么这会给我一个错误 angular module app config function routeProvider locationProvider httpProvider location 未捕获的错误 未知的提供商 来自应用程序
  • 动态加载的输入框不执行任何操作

    所以我有一些 html 会根据用户所在的 QuestionNumber 动态加载到 panel div 中 这不是全部代码 而是我认为的所有相关代码 无论如何
  • 使用 ng-table 角度计算列的总和

    我正在使用 Angular ng table 以表格形式绘制数值数据 我无法弄清楚如何在表末尾引入一行 该行显示每列所有值的总和 我可以在服务器端计算数据并将其呈现在用户界面中 但有没有办法在 ng table ng grid 中实现这一点
  • Elasticsearch 跨多个索引搜索 - 忽略不存在的索引

    我有弹性集群 其中我的索引包含当前日期 例如 example idex 2016 07 26 gt exists example idex 2016 07 25 gt exists example idex 2016 07 24 gt do
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并

随机推荐

  • 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两