String with variables binding in Angularjs

Question

I have a long string text which I have @ signs front of the values I want to be replaced. Note: Long text is generated, and it is in text file, after I read file, I have it in variable like below:

$scope.text = "example @by goes @you";

And I have let's say "by" and "you" variables, how would I apply it simply so that in view text gets proper values? How would I do it?

I can create custom filter and search for @by and @you and replace values or similar techniques, but perhaps there is simple method which I don't know that angular uses in this cases. Thanks

Not clear what you asked.

Ved
– Ved

2015-12-07 08:57:21 +00:00
Commented Dec 7, 2015 at 8:57 — Ved
– Ved, Commented Dec 7, 2015 at 8:57
Long text is generated, and it is in text file.

karma
– karma

2015-12-07 09:04:36 +00:00
Commented Dec 7, 2015 at 9:04 — karma
– karma, Commented Dec 7, 2015 at 9:04
Have a look at answer by fearphage

domino_katrino
– domino_katrino

2015-12-07 09:15:19 +00:00
Commented Dec 7, 2015 at 9:15 — domino_katrino
– domino_katrino, Commented Dec 7, 2015 at 9:15

Pjetr · Accepted Answer · 2015-12-11 11:10:00Z

2

Why do it at $digest over and over and over again, while you could easily transform the data that comes in from te server, and only having to modify it once?

I've create a Plunker who does just that.

angular.module('myApp', []);

angular.module('myApp').service('DataService', ['$http', '$q', function($http, $q) {
  function getData() {
    return $q(function(resolve, reject) {
      $http.get('./response.json').then(function(response) {
        resolve(response.data.value);
      });      
    });

  }

  this.getData = getData;
}]);

angular.module('myApp').controller('MyController', ['DataService', function(DataService) {
  var mv = this;
  mv.data = 'retrieving data';
  var filtered = false;

  var filterValues= {
    '@first_name': 'Hans',
    '@last_name': 'Pock',
    '@age': '79'
  };

  DataService.getData().then(function(response) {
    mv.data = filter(response, filterValues);
  });

  function filter(text, values) {
    var result = text;
    angular.forEach(values, function(value, key){
      var regexp = new RegExp(key, 'g');
      result = result.replace(regexp, value);
    });
    return result;
  }
}]);

edited Dec 11, 2015 at 11:10

answered Dec 7, 2015 at 10:14

Pjetr

1,39210 silver badges22 bronze badges

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

7 Comments

karma Over a year ago

you are right I noticed circle of digest at some points. But how would you solve it, let's say I have service which gets data and returns it, but I want to change value not in service but after data is fetched.

karma Over a year ago

any news on this? How would I do it after service got results, DataService.getData().then(function(response) { mv.data = response; //do it here });

Pjetr Over a year ago

I've forked my original plunkr and migrated the filter to the controller, you can check it out here: plnkr.co/edit/iVdcLoCSHnmTRHSPEgzy?p=preview

karma Over a year ago

ok, thank you, but somehow I couldn't find difference, what I meant by above is that, I have filter values in controller from different service and I want to apply it after other service fetched data, so it needs to be applied in controller.

Pjetr Over a year ago

it seems I provided you with the old link, I've updated the code in that plunker: plnkr.co/edit/iVdcLoCSHnmTRHSPEgzy?p=preview.

|

furkankatman · Accepted Answer · 2015-12-07 09:08:43Z

1

if i understand correctly you want this .And I created a plnkr for you to check out.

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {   $scope.name = 'World';
    $scope.text = "example @by goes @you"; });

app.filter('byfilter',function(){   return function(input,by,you){

    return input.replace('@by',by).replace('@you',you);
       } })

{{text|byfilter:'furkan':'ahmet'}}

example furkan goes ahmet

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

answered Dec 7, 2015 at 9:08

furkankatman

1,21014 silver badges24 bronze badges

5 Comments

karma Over a year ago

that's exactly what I wanted. Thank you. Though any notes about performance if you have long text?

furkankatman Over a year ago

You are welcome @karma , for performance issues I can point you that link not same as your situation but similar you can find info there. stackoverflow.com/questions/17969207/…

Pjetr Over a year ago

I think doing it on runtime creates a lot of unnecessary overhead which can easily be avoided by doing it once, when you receive the data.

furkankatman Over a year ago

Sure , making that filtering once is better when having tons of text , according to your texts size taking that filtering to js side gives much better performance .

Pjetr Over a year ago

problem with this solution is that you'll only filter the first occurrence, not all of them. This can be fixed by searching for a regex with modifier g(lobal)

Marin Takanov · Accepted Answer · 2015-12-07 09:00:15Z

0

It's a simple javascript. I don't see what this have to do with Angular.

$scope.name = 'John';
$scope.age = 25;
$scope.text = 'My name is ' + $scope.name + ' and I\'m ' + $scope.age + ' years old';

answered Dec 7, 2015 at 9:00

Marin Takanov

1,1484 gold badges20 silver badges38 bronze badges

1 Comment

karma Over a year ago

Sorry, I don't create long text, I get it from file or API or server, etc. If I would create it yes, it would be simple.

Collectives™ on Stack Overflow

String with variables binding in Angularjs

3 Answers 3

7 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related