如何创建一个过滤器来过滤AngularJS中的ng-model值？

Question

我有一个输入字段：

<input type="text" ng-model="defaultValue"> 

在我的控制器，它是一个空字符串：

$scope.defaultValue = ""; 

我想创建一个过滤器中的值类似于对象比较：

items: [ 
    { 
    repo_status: null, 
    cyberridge_loan_number: "FH00-0012-0003-0012", 
    repo_id: 18, 
    cr_loan_status: "CLOSED", 
    eff_days_delinquent: null, 
    principal_balance: null, 
    preemptive_charge_off_balance: 0, 
    total_final_charge_off_balance: 0 
    }, 
    ... 
] 

例如：比较repo_id> 18？我创建了一个NG-重复：

<li ng-repeat="(key, value) in data.items[0]">{{value}}</li> 

（因为这NG-重复对所有格式相同的API，我使用{键，值}对）

但如何让像一个逻辑过滤器（ repo_id> 18？）并适用于ng-repeat？

非常感谢！

Answer 1

您可以创建这样的自定义过滤器，

$scope.greaterThan = function(prop, val) { 
     return function(item) { 
     if (item[prop] > val) return true; 
     } 
    } 

DEMO

var app = angular.module('myApp', []) 
 

 
app.controller('MyController', function($scope) { 
 
    $scope.defaultValue = 0; 
 
    
 
    $scope.items = [{ 
 
     repo_status: null, 
 
     cyberridge_loan_number: "FH00-0012-0003-0012", 
 
     repo_id: 18, 
 
     cr_loan_status: "CLOSED", 
 
     eff_days_delinquent: null, 
 
     principal_balance: null, 
 
     preemptive_charge_off_balance: 0, 
 
     total_final_charge_off_balance: 0 
 
    }, 
 
    { 
 
     repo_status: null, 
 
     cyberridge_loan_number: "FH00-0012-0003-0012", 
 
     repo_id: 34, 
 
     cr_loan_status: "OPEN", 
 
     eff_days_delinquent: null, 
 
     principal_balance: null, 
 
     preemptive_charge_off_balance: 0, 
 
     total_final_charge_off_balance: 0 
 
    }]; 
 
    
 
    $scope.greaterThan = function(prop, val) { 
 
     return function(item) { 
 
     if (item[prop] > val) return true; 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <input type="text" ng-model="defaultValue"> 
 
    <ul> 
 
    <li ng-repeat="item in items | filter: greaterThan('repo_id', defaultValue)">   {{item}} 
 
    </li> 
 
    </ul> 
 
</div>