Manipulate string inside {} in Angularjs

Question

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.

looks like a good candidate for a filter as @ganaraj suggested: docs.angularjs.org/guide/… — Guillaume86
– Guillaume86, Commented Oct 8, 2012 at 15:48

Ganaraj · Accepted Answer · 2012-10-07 08:49:16Z

6

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);
    }
}

answered Oct 7, 2012 at 8:49

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

andy_314 Over a year ago

Thank you, is a good solution. I have created a custom filter to resolve it, so now I do something like this: <img ng-src="{{article.img | encodeURI}}"> What do you think is the best approach?

Ganaraj Over a year ago

To me it looks like the filter is a better approach. Mostly because that is write one fire many times approach and I am assuming you would have to encode uri in more than 1 controller. If you do my approach you would have to write this in all the controllers which need that functionality. A filter seems appropriate unless someone else has an opinion as to why that wont fit in this case or something.

Collectives™ on Stack Overflow

Manipulate string inside {} in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related