Question

我有一些与我合作的角度代码，希望很快就能重构我正在尝试根据复选框过滤<div> { this.state.results.map( ( record ) => { return <Comment /> } } </div>。

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

ng-repeat

{ name: 'mail', rating: 2.4, source: 'EDD', users: 1000, description: '' }工作设置为迭代

ng-repeat

该属性已重新命名为searchController中存在的产品服务，如此

HTML

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

指令

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

我正在使用控制器中的一个简单函数来复选复选框

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

源名称从ex：媒体或年龄返回。

我希望能添加

$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>

将filterAdded视为一种功能。

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

我发现我需要过滤规则来源。

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

没有看到我可以比较的方式获取 rule.source 和filterAdded值。

source: 'EDD'

任何见解或反馈都表示赞赏。

Answer 1

我进入Angular 4，所以我将使用这种语言，但你可以适应角度js（1.x）。

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

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

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

然后，在li标签上，我会使用ngIf检查它是否在某个过滤器下。在ngIf上，您可以绑定到一个函数，甚至可以传递对象的属性或您正在迭代的数组项：

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

希望它有所帮助。

使用过滤器更新ng-repeat

1 个答案: