如何創建一個過濾器來過濾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>