Manipulate string inside {} in Angularjs

Question

Manipulate string inside {} in Angularjs

I'm new on Angularjs. I making some test and I couldn't find out if is there way to do something like this:

<li ng-repeat="article in articles" class="thumbnail">
    <img  ng-src="{{encodeURI(article.image)}}"></a>
</li>

The idea is to manipulate the string with a native JS function.

javascript
angularjs

Answer 1

You dont have to use the interpolate directive in these scenario's. You can use something that is much more understandable , like a function.

<li ng-repeat="article in articles" class="thumbnail">
<img ng-src="encode(article.image)">
</ii>

Now encode should be a function in either the scope that contains the articles or in the inner scope (Note : ng-repeat creates a new scope for each item it creates. So in this example for each article there will be a new scope ).

Lets say your controller is called ArticleCtrl ( I am going to assume )

function ArticlesCtrl($scope){
    $scope.articles = [];
    $scope.encode = function(url){
        return encodeURI(url);
    }
}