CODEWITHSUNDEEP
angularjsdomangularjs-directive
Anil Sharma
Anil Sharma

Reputation: 2962

Split String and then put in ng-repeat?

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?

Upvotes: 2

Views: 7743

Answers (3)

flaky
flaky

Reputation: 7404

why not:

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

Upvotes: 6

Anil Sharma
Anil Sharma

Reputation: 2962

Well i did this in this way.

i had a large data coming in scope. It was not just about the image.There were nested objects data.

<div ng-repeat="image in data.image">
  <ul>
   <li ng-repeat="image in i_name | split ">
     <a href="#"><img ng-src="somepath/{{image}}"></a>
  </li>
 </ul>
</div>

Upvotes: 0

Matt Way
Matt Way

Reputation: 33161

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>

Upvotes: 3

Related Questions