How to replace values dynamically in Angular?

Question

My URL structure:

/json/feed?car=${cars}&colour=${color}&model=VW

I want to replace what is in ${} with JavaScript var's I have available (var cars, var colors, etc.), however I am not sure how I can do this easily with Angular.

Would something like:

$scope.newString = oldString.replace("${cars}","cars");

Work ok, or is there a %s way of doing this with JavaScript ? Which is a better way with Angular?

the URL actually comes back to me in a JS var that the server sends, hence why I'm trying to change the vars - those are placeholder tags sent — Poiro, Jul 17 '15 at 11:51
Okay. You'll have to do a replace like you did earlier except replace with your variable instead of a string. See the answer. — Raphael Rafatpanah, Jul 17 '15 at 11:54

Raphael Rafatpanah · Accepted Answer · 2015-07-17T12:03:55.467

2

Replace with variable instead of string.

$scope.newString = oldString.replace("${cars}",$scope.cars);

Please take a look at this plunkr for reference.

You can simply chain .replace's.

$scope.new = old.replace('${cars}', $scope.car).replace('${color}', $scope.color).replace('${model}', $scope.model);

edited Jul 17 '15 at 12:03

answered Jul 17 '15 at 11:53

Raphael Rafatpanah

19,082
25
92
158

How would I update the two values together, would: $scope.newString = oldString.replace("\${cars}","\${color}",$scope.cars,$scope.color); work ok? – Poiro Jul 17 '15 at 12:00
Work fine for my case. – Poiro Jul 17 '15 at 12:32

score 2 · Answer 2 · edited May 23 '17 at 11:58

http://plnkr.co/edit/cFeD3tLOYWcPVwMAFQG3?p=preview

How to replace all occurrences of a string in JavaScript?

You can use interpolate service of angularjs. Interpolate service works with angular js expressions, which should consist {{ }} instead of {} for replacement.

app.controller('MainCtrl', function($scope,$interpolate) {
  $scope.name = 'World';

  function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
  function replaceAll(string, find, replace) {
    return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
  }

  $scope.interpolate = function ( ) {
    var context = { cars :"myCars", color:"red"};
    var url = "/json/feed?car=${cars}&colour=${color}&model=VW";
    var t1 = replaceAll(url,"{","{{");
    var url2 = replaceAll(t1,"}","}}");
    var exp = $interpolate(url2);
    console.log(exp(context)); 
  }

  $scope.interpolate();
});

Output : /json/feed?car=$myCars&colour=$red&model=VW

How to replace values dynamically in Angular?

2 Answers2