javascript - 使用过滤器更新 ng-repeat

Question

我正在使用一些 Angular 代码，希望很快就能重构。
我正在尝试根据复选框过滤ng-repeat。

我有一个看起来像这样的数据树......

{
    name: 'mail',
    rating: 2.4,
    source: 'EDD',
    users: 1000,
    description: ''
}

ng-repeat 工作被设置为迭代

<li ng-repeat="rule in property">{{rule[entityPropertyName]}</li>

该属性已从 searchController 中存在的产品服务中重命名，如下所示

HTML

<search-section productName="qualifier" 
                product="qualifiers" 
                entityPropertyName="name"></search-section>

指令

controller: 'searchController',
scope: {
    product: '=',
    productName: '@',
    entityPropertyName: '@'
},

我正在使用 Controller 中的一个简单功能来过滤复选框

$scope.filterAdded = function(sourceName) {
    if($scope.filteredQualifiers.sourceName[sourceName]) {
        return sourceName;
    }
}  // returns source name 

返回源名称，例如:媒体或年龄。

我希望我可以添加

$scope.filterAdded 

像这样的ng-repeat迭代器

<li ng-repeat="rule in property | filter: filterAdded">{{rule[entityPropertyName]}</li>

指令将支持此过滤器，如下所示

scope: {
    entities: '=',
    entityName: '@',
    entityPropertyName: '@',
    filterAdded: '&'
},

filterAdded 被视为一个函数。

添加过滤器后返回单个值，例如EDD

我确定我需要通过规则源进行过滤。

source: 'EDD'

没有找到可以比较 get rule.source 和 filterAdded 值的方法。

<li ng-repeat="rule in property | filter: filterAdded"></li> 

如有任何见解或反馈，我们将不胜感激。

Answer 1

我喜欢 Angular 4，所以我将使用这种语言，但你可以适应 Angular js (1.x)。

如果我做对了，将使用 ngFor 或 ngRepeat 与 ngIf 而不是使用管道。

<ul *ngFor=" let rule in property">

*请注意，ngFor 将用于 ul，而不是 li。

然后，在 li 标签上，我将使用 ngIf 来检查它是否在某个过滤器下。在 ngIf 上，您可以绑定(bind)到函数，甚至可以传递要迭代的对象或数组项的属性，如下所示:

<li *ngIf="isThisOnFilter(rule['rating'])">{{ rule['name'] }}</li>

希望有帮助。