Angular Js过滤器不适用于javascript加法运算符

时间:2016-09-24 17:37:58

标签: javascript angularjs operator-keyword angularjs-filter addition

当我遇到以下问题时,我正在和Angular Js一起玩

<li ng-repeat="x in capitals | orderBy:'capital'">
{{ x.country|uppercase}} : {{ x.capital|uppercase}}
</li>

有效但

<li ng-repeat="x in capitals | orderBy:'capital'">
{{ x.country|uppercase+ ":" + x.capital|uppercase}} 
</li>

无法工作

有什么工作吗?

3 个答案:

答案 0 :(得分:0)

由于您无法在表达式中使用加法运算符,因此无效。您可以编写自定义过滤器并使用它。检查下面的小提琴。

  jsfiddle.net/7nzot7jh/

答案 1 :(得分:0)

找到答案 这是我的自定义过滤器

        app.filter('alterCap',function() 
        {
            return function(x) 
            {
                var i, c, txt = "";
                for (i = 0; i < x.length; i++) {
                    c = x[i];
                    if (i % 2 == 0) {
                        c = c.toUpperCase();
                    }
                    txt += c;
                }
                return txt;
            };
        });

在我的控制器中,我已经通过了

app.controller("myCtrl",function($scope,$filter){
                $scope.capitals = [
                {country:'India',capital:'Delhi'},
                {country:'Sri Lanka',capital:'Colombo'},
                {country:'Afganistan',capital:'Kabul'},
                {country:'Bhutan',capital:'Norway'},
                {country:'Nepal',capital:'Thimphu'},
                {country:'Japan',capital:'Tokyo'},
                {country:'China',capital:'Beijing'},
                {country:'Russia',capital:'Moscow'},
                {country:'USA',capital:'Washington, D.C.'}
                ];
                $scope.applyAlterCap = function(movie){
                    return $filter('alterCap')(movie);
                };
            });

现在我可以在我的表达式中使用Filter

        <p>Using Custom Filter with addition operator inside expression</p>
        <ul>
            <li ng-repeat="x in capitals | orderBy:'capital'">
                {{ applyAlterCap(x.country) + ":" + x.capital }}
            </li>
        </ul>

答案 2 :(得分:0)

#footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
clear: both; 
line-height: 1.36em;
padding: 08px 0px 0px;
text-align: center;
margin: 0px auto;
background: #fff;
border-top: 5px solid #4cb6cb;
}