CODEWITHSUNDEEP
javascriptregexangularjs
leaksterrr
leaksterrr

Reputation: 4167

Regex on item inside ng-repeat

I'm currently building an app that's using the Soundcloud SDK and I need to be able to run a regexp on the artwork_url to replace -large with 500x500, according to: https://developers.soundcloud.com/docs/api/reference#

This was my approach which doesn't seem to trigger the artworkRegex:

<li ng-repeat="track in tracks">
    <div class="track-artwork" style="background-image: url('{{ track.artwork_url | filter: artworkRegex }}');"></div>
    <div class="track-details">
        track info
    </div>
</li>

$scope.artworkRegex = function (artwork) {
    console.log(artwork);
}

What's the best way to go about being able to run a regexp track.artwork_url?

Upvotes: 0

Views: 496

Answers (3)

jimmygchen
jimmygchen

Reputation: 795

Try ng-style:

<div class="track-artwork" ng-style="background-image: url('{{ track.artwork_url | filter: artworkRegex }}');">

https://docs.angularjs.org/api/ng/directive/ngStyle

Upvotes: 0

Casimir et Hippolyte
Casimir et Hippolyte

Reputation: 89567

I will let you implement it in the correct way, example in pure Javascript:

var url = 'http://i1.sndcdn.com/avatars-000000011308-xq0whu-large.jpg?b17c165';

var result = url.replace(/-large\b/, '-t500x500');

Upvotes: 0

PSL
PSL

Reputation: 123739

You don't have a filter, instead what you have is a method on the scope, also use ng-style instead of style, so that browser does not consider the expression as invalid style and strip it off.

ng-style="{'background-image': 'url(' + artworkRegex(track.artwork_url) + ')'}"

Or if you want to create filter, use filter syntax:-

  .filter('artworkRegex', function () {
       return function(artwork){
          .....
           return newtransformedartwork;
       }
    });

and use it as:-

  ng-style="{'background-image': 'url(' + (track.artwork_url | artworkRegex)  + ')'}"

Plnkr

Upvotes: 1

Related Questions