javascript - 将键/值对传递给 Angular 过滤器

Question

我有以下模板代码:

<div ng-repeat="entry in entries"
     ng-bind-html="ctrl.entry_statuses[entry] | createEntryURL">
</div>

哪里ctrl.entry_statuses是 Controller 中的一个对象，可能如下所示:

{a: 1, b: 2, c: 3}

现在，createEntryUrl过滤器看起来像这样:

angular.module('test').filter('createEntryURL', function() {
    return function(entry){
        switch(entry){
            case 1:
                return '<span class="one">' + entry + '</span>'
            case 2:
                return '<span class="two">' + entry + '</span>'
            case 3:
                return '<span class="three">' + entry + '</span>'
        }
    }
});

果然，通过了 entry变量仅包含键/值对的值部分。有没有办法同时传递键和值，以便我可以将键用作 <span> 中的字符串以及 switch 中匹配的值声明？

生成的 HTML 应如下所示:

<span class="one">a</span>
<span class="two">b</span>
<span class="three">c</span>

Answer 1

为了将额外的参数传递给自定义过滤器，您可以使用如下内容:

<div ng-repeat="entry in entries"
     ng-bind-html="ctrl.entry_statuses[entry] | createEntryURL: entry">
</div>

这将是您的 filter 函数中的第二个参数。像这样:

angular.module('test').filter('createEntryURL', function() {
    return function(entryStatus, entry){ 
        switch(entryStatus){
            case 1:
                return '<span class="one">' + entry + '</span>'
            case 2:
                return '<span class="two">' + entry + '</span>'
            case 3:
                return '<span class="three">' + entry + '</span>'
        }
    }
});

这应该会产生你所期望的结果:

<span class="one">a</span>
<span class="two">b</span>
<span class="three">c</span>