过滤数字范围:AngularJS

时间:2014-07-21 07:08:53

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

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

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>

4 个答案:

答案 0 :(得分:10)

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

$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

答案 1 :(得分:2)

您可以使用自定义过滤器选择功能执行此操作。在你的重复中你可以做到:

<div  ng-repeat = "formElement in formElements | filter:filterAge">

控制器中的以下功能:

$scope.filterAge = function(val) {
  return (val.age > MIN_AGE && val.age < MAX_AGE);
};

但是,在您的情况下,您在不同的指令和不同的范围内具有所需的值(MIN_AGEMAX_AGE)。您可以通过使用服务或将值存储在父作用域中并将引用传递给指令来将此值共享到正确的指令。

答案 2 :(得分:1)

扩展runTarm的答案。这将允许您使用点运算符嵌套值:

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

  return function predicateFunc(item) {
    var keys = fieldName.split('.');
    var val = item;
    for (var i = 0; i < keys.length; i++) {
      val = val[keys[i]];
    }

    return minValue <= val && val <= maxValue;
  };
};

在ng-repeat表达式中使用,如下所示:

<div ng-repeat="formElement in formElements | filter:byRange('person.age', filterModelMin.age, filterModelMax.age)">

答案 3 :(得分:0)

这是我的解决方案,此解决方案效果更好,因为在删除min和maxlikes输入后,将返回所有集合。

$scope.byRange = function (fieldName, minLikes, maxLikes) {
                    if (minLikes === undefined || maxLikes === undefined || maxLikes === null || minLikes === null) {
                        return function predicateFunctionTwo(item) {
                            return item[fieldName];
                        }
                    } else {
                        return function predicateFunc(item) {
                        return minLikes <= item[fieldName] && item[fieldName] <= maxLikes;
                      };
                  }
                }
<div class="content" ng-repeat="data in addingPlaceService | filter:byRange('likes', minLikes, maxLikes) track by $index">