我的目标是应用设置为循环对象属性的格式过滤器。
采取以下对象数组:
[ { "value": "test value with null formatter", "formatter": null, }, { "value": "uppercase text", "formatter": "uppercase", }, { "value": "2014-01-01", "formatter": "date", } ]
我要编写的模板代码是这样的:
<div ng-repeat="row in list"> {{ row.value | row.formatter }} </div>
我 期望看到这个结果 :
test value with null formatter UPPERCASE TEXT Jan 1, 2014
但是也许很明显,这段代码会引发错误:
Unknown provider: row.formatterFilterProvider <- row.formatterFilter
我无法想象如何解析{{}}中的“ formatter”参数;谁能帮我?
参见plunkr http://plnkr.co/edit/YnCR123dRQRqm3owQLcs?p=preview
的|是角构造,找到一个定义的过滤器具有该名称和它适用于左侧的值。我认为您需要做的是创建一个以过滤器 名称 作为参数的过滤器,然后调用适当的过滤器(jsfiddle)(改编自M59的代码):
|
HTML:
<div ng-repeat="row in list"> {{ row.value | picker:row.formatter }} </div>
Javascript:
app.filter('picker', function($filter) { return function(value, filterName) { return $filter(filterName)(value); }; });
感谢@karlgold的评论,这是一个支持参数的版本。第一个示例add直接使用过滤器将数字添加到现有数字,第二个示例使用过滤器按字符串useFilter选择add过滤器并将参数传递给它(jsfiddle.):
add
useFilter
<p>2 + 3 + 5 = {{ 2 | add:3:5 }}</p> <p>7 + 9 + 11 = {{ 7 | useFilter:'add':9:11 }}</p>
app.filter('useFilter', function($filter) { return function() { var filterName = [].splice.call(arguments, 1, 1)[0]; return $filter(filterName).apply(null, arguments); }; });