Question

我目前正在构建一个使用Soundcloud SDK的应用，我需要能够在artwork_url上运行regexp，将-large替换为500x500，根据：https://developers.soundcloud.com/docs/api/reference#

这是我的方法似乎没有触发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);
}

能够运行正则表达式track.artwork_url的最佳方式是什么？

Answer 1

您没有过滤器，而是您拥有的是范围上的方法，也使用ng-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

关于ng-repeat内的项目的正则表达式

3 个答案: