Split String and then put in ng-repeat?

Question

I have a situation where images name for a particlar post are coming in a string: like this:

**"i_name":"logo_v1_300px.png,logo_v1_140px.png,logo_v1_220px.png"**

I need to split this string and show like(html below):

 <ul>
 <li><a href="#"><img src="images/photo2.png" alt=""></a></li>
 <li><a href="#"><img src="images/photo3.png" alt=""></a></li>
 <li><a href="#"><img src="images/photo4.png" alt=""></a></li> 
 </ul>

I have filter which splits string like:

  angular.module('myFilters', []).
  filter('split', function() {
   return function(input, delimiter) {
  var delimiter = delimiter || ',';

  return input.split(delimiter);
} 

});

Now How can I show these images coming from split for a post:

 <div ng-repeat ="data in comments">

   mydata="{{data.text}}"

  photos
 <ul> 
   <li><a href="#"><img src="somepath"/{{data.i_name | split }}></a></li>
 </ul>
 </div>

How can I accomplish this. How these images (coming from split string filter) can come under loop in Angular way?

Answer 1

why not:

ng-repeat="item in items.split(',')"

Answer 2

Why don't you simplify your problem by performing the split inside a controller?

Controller:

var data = {
    "i_name":"logo_v1_300px.png,logo_v1_140px.png,logo_v1_220px.png"
};

$scope.images = data.i_name.split(',');

View:

<ul>
    <li ng-repeat="image in images">
        <a href="#"><img ng-src="somepath/{{image}}"></a>
    </li>
</ul>