14

我正在使用aurelia并希望在视图中而不是在视图模型中过滤集合（数组）。

我正在尝试以下语法来做到这一点：

<div class="col-sm-7  col-md-7 col-lg-7 ${errors.filter(function(err){return err.Key==='car.Model';}).length >0? 'alert alert-danger' :''}">
            <span repeat.for="error of errors">
                <span if.bind="error.Key==='car.Model'">
                    ${error.Message}
                </span>
            </span>
</div>

我在浏览器控制台中收到以下错误：

Error: Parser Error: Missing expected ) at column 28 in [errors.filter(function(err){return err.Key==='car.Model';].

这在 angularJS 中是可能的，如下所示：

 <div class="small-7  medium-7 large-7 columns end">
        <span class="error" ng-repeat="error in errors  | filter:{ Key: 'car.Model'}">
            <span class="error-message">
                {{error.Message}}
            </span>
        </span>
    </div>

类似的事情在aurelia也可能吗？

我也很想知道如何repeat.for在 aurelia 中过滤集合/数组（类似于ng-repeat）。我尝试以类似的方式使用过滤器功能，但它也不起作用，并且出现了类似的错误。

4

2 回答 2

30

这有点尴尬。但是经过一些研究（我应该事先做：P）我得到了答案。

可以使用 ValueConverter 来完成，如下所示：http: //jdanyow.github.io/aurelia-converters-sample/。

而且我认为这很酷。

现在我的代码如下所示：

<div class="col-sm-7  col-md-7 col-lg-7 alert alert-danger" if.bind="errors | hasPropertyValue:'Key':'car.Model'">
    <span repeat.for="error of errors | filterOnProperty:'Key':'car.Model'">
        <span>
           ${error.Message}
        </span>
    </span>
</div>

我在 TypeScript ( valueconverters.ts) 中定义了几个值转换器：

export class FilterOnPropertyValueConverter {
toView(array: {}[], property: string, exp: string) {

    if (array === undefined || array === null || property === undefined || exp === undefined) {
        return array;
    }
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1);
}
}

export class HasPropertyValueValueConverter {
toView(array: {}[], property: string, exp: string) {

    if (array === undefined || array === null || property === undefined || exp === undefined) {
        return false;
    }
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1).length > 0;
}
}

在我看来，我终于导入了这些：<import from="yourPath/valueconverters"></import>

于 2015-03-20T09:40:15.557 回答
-1

很高兴学习如何以类似的方式使用 Aurelia。如何获取过滤列表的计数，如以下 angular 1 代码？

<div class="small-7  medium-7 large-7 columns end">
        <span class="error" ng-repeat="error in filtered = (errors  | filter:{ Key: > 'car.Model'})">
            <span class="error-message">
                {{error.Message}}
            </span>
        </span>
    </div>
            <div class="row text-center" ng-if="errors.length>0">
                Total records: {{filtered.length}}
            </div>
于 2016-08-14T04:12:09.457 回答