我正在使用 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>我在浏览器控制台中收到以下错误:
Error: Parser Error: Missing expected ) at column 28 in [errors.filter(function(err){return err.Key==='car.Model';].
这在 angularJS 中是可能的，如下所示:
<span class="error" ng-repeat="error in errors | filter:{ Key: 'car.Model'}"><span class="error-message">{{错误信息}}</span></span>在 aurelia 中是否也可能发生类似的事情?
我也很想知道如何在 aurelia 的 repeat.for 中过滤集合/数组(类似于 ng-repeat).我试图以类似的方式使用过滤器功能，但它也不起作用，我得到了类似的错误.
有点尴尬.但是经过一些研究(我应该事先做:P)我得到了答案.
可以使用 ValueConverter 来完成，如下所示:http://jdanyow.github.io/aurelia-converters-样本/.
而且我觉得这很酷.
现在我的代码是这样的:
<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'"><跨度>${error.Message}</span></span>而且我在 TypeScript 中定义了几个 valueconverters (valueconverters.ts):
导出类 FilterOnPropertyValueConverter {toView(数组:{}[]，属性:字符串，exp:字符串){if (array === undefined || array === null || property === undefined || exp === undefined) {返回数组；}return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1);}}导出类 HasPropertyValueValueConverter {toView(数组:{}[]，属性:字符串，exp:字符串){if (array === undefined || array === null || property === undefined || exp === undefined) {返回假；}return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1).length >0;}}我最终在我的视图中导入了这些:<import from="yourPath/valueconverters"></import>
I am using aurelia and want to filter a collection (array) in view rather than in view model.
I am trying the following syntax to do so:
<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>
And I am getting following error in browser console:
Error: Parser Error: Missing expected ) at column 28 in [errors.filter(function(err){return err.Key==='car.Model';].
This is possible in angularJS as follows:
<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>
Is similar thing also possible in aurelia?
I would also love to know how a collection/array can be filtered in repeat.for in aurelia (similar to ng-repeat). I tried to use filter function in similar fashion but it too didn't work and I got similar error.
It's a little embarrassing. But after a little research (which I should have done beforehand :P) I have got the answer.
It can be done using ValueConverter as shown here: http://jdanyow.github.io/aurelia-converters-sample/.
And I think it's quite cool.
Now my code looks like this:
<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>
And I have defined couple of valueconverters in 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;
}
}
And I finally imported these in my view: <import from="yourPath/valueconverters"></import>
这篇关于aurelia 视图中的过滤器阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！