ng-repeat and string replace expression value

Question

I am unable to find a solution to remove a substring in an angular expression while using the ng-repeat directive.

The controller is in an external javascript file, and html is as follows.

function myController($scope, $http){
  $http.get('http://localhost:3000/people.json').
    success(function(data){
      $scope.persons = data;
    });
}

<table ng-controller="myController" class="table table-striped table-hover">
  <thead class="text-center">
    <th>Name</th>
    <th>ID</th>
    <th>Address</th>
  </thead>
  <tbody>
    <tr ng-repeat="person in persons" class="text-center">
      <td>((person.name}}</td>    
      <td>{{person.id}}</td>
      <td>{{person.address}}</td>
    </tr>
  </tbody>
</table>

The localhost:3000/people.json page has a couple hundred JSON objects:

[ { name: "John Smith", id: 12345, address: "addr:789 Broadway St" },

... ]

My Question: What is the most efficient and/or easiest method of stripping out the 'addr:' substring in the address value? I don't have write access to the people.json page.

RoyTheBoy · Accepted Answer · 2015-02-04 17:11:01Z

6

add a function to your controller. something like

$scope.stripAddr = function(address) {
  return address.substring(5);
}

and change your html to

<td>{{stripAddr(person.address)}}</td>

please excuse and errors in my javascript I use coffescript all time but I hope you get the idea

answered Feb 4, 2015 at 17:11

RoyTheBoy

6581 gold badge6 silver badges15 bronze badges

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

5 Comments

Pankaj Parkar Over a year ago

@roytheboy What happen if text change in future become it become address: instead of addr:' or for writing the same logic for other requirement. may lead to rewrite the code.

RoyTheBoy Over a year ago

@pankajparkar I was just trying to illustrate the principle and keep the javascript as simple as possible as I'm much happier with coffeescript. Its easy enough to change the javascript to parse the string properly.

Pankaj Parkar Over a year ago

@RoyTheBoy but playing with the index directly is not good thing

RoyTheBoy Over a year ago

@pankajparket. As I said I was just illustrating the principle, hence the 'something like'. Just replace substring(5) in my answer with value.split("addr:").pop(). The real difference in our answers is whether to use a filter or a controller function. I just find the later more versatile in general. For example 'addr' could be passed as data to the controller and used in my function.

Pankaj Parkar Over a year ago

@RoyTheBoy I would prefer the filter, That will make more angularise thing..your solution is also good..but don't sound like generic & resusable?

Pankaj Parkar · Accepted Answer · 2015-02-04 17:17:16Z

0

Use filter that could be the best way for you. You can reuse that filter any where, where you want to remove some matching string like here we use addr:

HTML

<tr ng-repeat="person in persons" class="text-center">
  <td>((person.name}}</td>    
  <td>{{person.id}}</td>
  <td>{{person.address}}</td>
</tr>

JS

.filter('matchreplace',function() {
        return function(value, matchstring){
            return value.split(matchstring).pop()
        }
    }
  );

Working Fiddle

Thanks.

answered Feb 4, 2015 at 17:17

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

3 Comments

deric4 Over a year ago

This also works. It looks a little cleaner in the html honestly, is there any significant performance difference between this and answer and the one RoyTheBoy provided?

Pankaj Parkar Over a year ago

Yes you can use it any where where you want to remove string like here we remove addr:..this is reusable code..and using specific index for replacing string not great deal..what happen if text changed to address: in RoyTheBoy answer

Pankaj Parkar Over a year ago

@dwrecked now you decide which is the better way to do it.. Thanks

konstantinos chouvardas · Accepted Answer · 2018-03-19 04:23:06Z

0

try

<td>{{person.address.substring(5)}}</td>

answered Mar 19, 2018 at 4:23

konstantinos chouvardas

11 bronze badge

Collectives™ on Stack Overflow

ng-repeat and string replace expression value

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related