Question

我有以下模板代码：

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

其中ctrl.entry_statuses是控制器中的对象，可能如下所示：

{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

为了将额外参数传递给自定义filter，您可以使用以下内容：

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

Answer 2

将输入参数传递给过滤器，如下所示

$scope.map[$scope.key]=$scope.value;
$scope.key="";
$scope.value="";

将键/值对传递给角度滤镜

2 个答案: