angularjs - 筛选数字范围 : AngularJS

标签 angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angularjs-filter

我有一个包含一些输入类型的表单,如文本、 radio 等。当我提交表单时,它会在表单下方列出输入的详细信息(为此使用了模板和指令)。我想在年龄中进行过滤,即数字输入类型,这样当我给出一个年龄范围时,它应该过滤具有相应年龄范围的配置文件。这是plunker:

http://plnkr.co/edit/h8p8rtZuAhCoKClUjgE9?p=preview

    <table border="1" style="width:200px">
   <tr>
       <td> <div>Name : {{  formElement.name }} </div><br> </td> 
   </tr>
   <tr>
       <td> <div>Age : {{ formElement.age }}</div><br> </td>
   </tr>

最佳答案

您可以编写一个自定义过滤器函数,按特定字段的范围进行过滤:

$scope.byRange = function (fieldName, minValue, maxValue) {
  if (minValue === undefined) minValue = Number.MIN_VALUE;
  if (maxValue === undefined) maxValue = Number.MAX_VALUE;

  return function predicateFunc(item) {
    return minValue <= item[fieldName] && item[fieldName] <= maxValue;
  };
};

并在 ng-repeat 中使用它表达:
<div ng-repeat="formElement in formElements | filter:byRange('age', filterModelMin.age, filterModelMax.age)">

请注意 filterModelMin.agefilterModelMax.age可以直接在fasterDisplay中使用指令,因为两者 fasterFormfasterDisplay没有自己的范围。

示例 plunker: http://plnkr.co/edit/dFbBCKxSxm9RI9dwSeYR?p=preview

关于angularjs - 筛选数字范围 : AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24859420/

相关文章:

javascript - 不能使用 2 个 js 函数,它们之间有 sleep

ruby-on-rails - Ruby on Rails 错误 bundler

css - 将 BEM CSS 与 Angular 指令结合使用

javascript - 无法从指令中的隔离范围广播 - 将指令范围设置为 false 的负面影响?

javascript - 隔离仅限于属性的指令的范围

javascript - 日期输入和 Angular 奇怪错误

javascript - 未知 vendor | Angular Bootstrap 颜色选择器

angularjs - 指令模板中 ng 类中的条件逻辑

javascript - 在 AJAX 查询 AngularJS 后重新加载 DOM

javascript - AngularJS - ng-repeat 生成的 Controller 实例内的事件问题