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

Have a look at answer by [fearphage](http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format) — domino_katrino, Dec 07 '15 at 09:15

Pjetr · Accepted Answer · 2015-12-11T11:10:00.817

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 '15 at 11:10

answered Dec 07 '15 at 10:14

Pjetr

1,372
10
20

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 Dec 08 '15 at 02:39
any news on this? How would I do it after service got results, `DataService.getData().then(function(response) { mv.data = response; //do it here });` – karma Dec 08 '15 at 08:14
I've forked my original plunkr and migrated the filter to the controller, you can check it out here: http://plnkr.co/edit/iVdcLoCSHnmTRHSPEgzy?p=preview – Pjetr Dec 08 '15 at 08:20
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. – karma Dec 08 '15 at 10:05
it seems I provided you with the old link, I've updated the code in that plunker: http://plnkr.co/edit/iVdcLoCSHnmTRHSPEgzy?p=preview. – Pjetr Dec 08 '15 at 10:19
no, this will filter once, when the controller is initialised, where if you were to use a filter, it will run every $digest. – Pjetr Dec 08 '15 at 10:39
Can you update your answer with latest plunker? Thanks! – karma Dec 11 '15 at 08:52

score 1 · Answer 2 · answered Dec 07 '15 at 09:08

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 07 '15 at 09:08

katmanco

1,146
12
24

that's exactly what I wanted. Thank you. Though any notes about performance if you have long text? – karma Dec 07 '15 at 09:21
1

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. http://stackoverflow.com/questions/17969207/angularjs-ng-filter-is-very-slow-on-array-of-1000-elements – katmanco Dec 07 '15 at 09:24
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. – Pjetr Dec 07 '15 at 10:16
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 . – katmanco Dec 07 '15 at 10:21
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) – Pjetr Dec 08 '15 at 10:21

score 0 · Answer 3 · answered Dec 07 '15 at 09:00

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 07 '15 at 09:00

Marin Takanov

1,079
3
19
36

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. – karma Dec 07 '15 at 09:03

String with variables binding in Angularjs

3 Answers3