过滤数字范围：AngularJS

发布时间：2020-12-17 17:05:51 所属栏目：安全来源：网络整理

导读：我有一个带有一些输入类型的表单,如文本,广播等.当我提交表单时,它会在表单下面列出输入的详细信息(使用模板和指令).我想在年龄中进行过滤,即数字输入类型,这样当我给出年龄范围时,它应该过滤具有相应年龄范围的配置文件.以下是plunker： http://plnkr.co/ed

我有一个带有一些输入类型的表单,如文本,广播等.当我提交表单时,它会在表单下面列出输入的详细信息(使用模板和指令).我想在年龄中进行过滤,即数字输入类型,这样当我给出年龄范围时,它应该过滤具有相应年龄范围的配置文件.以下是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.age和filterModelMax.age可以直接在fasterDisplay指令中使用,因为fasterForm和fasterDisplay都没有自己的作用域.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!