ng-repeat內的正則表達式

Question

我目前正在建設目前正使用的SDK的SoundCloud的應用程序，我需要能夠對artwork_url運行正則表達式替換-large與500x500 ，根據： https://developers.soundcloud.com/docs/api/reference ＃

這是我的方法，似乎並沒有觸發articleRegex：

<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);
}

能夠運行regexp track.artwork_url的最佳方法是什么？

Answer 1

您沒有過濾器，而是在范圍上使用的是方法，還使用ng-style而不是style，這樣瀏覽器就不會將表達式視為無效的樣式並將其刪除。

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

或者，如果您要創建過濾器，請使用過濾器語法：-

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

並將其用作：-

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

Plnkr

Answer 2

我將讓您以正確的方式實現它，例如純Javascript：

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

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

Answer 3

嘗試ng-style：

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

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