[英]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# 我目前正在建设目前正使用的SDK的SoundCloud的应用程序,我需要能够对artwork_url运行正则表达式替换
-large
与500x500
,根据: https://developers.soundcloud.com/docs/api/reference #
This was my approach which doesn't seem to trigger the artworkRegex: 这是我的方法,似乎并没有触发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);
}
What's the best way to go about being able to run a regexp track.artwork_url
? 能够运行regexp
track.artwork_url
的最佳方法是什么?
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
而不是style,这样浏览器就不会将表达式视为无效的样式并将其删除。
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) + ')'}"
I will let you implement it in the correct way, example in pure Javascript: 我将让您以正确的方式实现它,例如纯Javascript:
var url = 'http://i1.sndcdn.com/avatars-000000011308-xq0whu-large.jpg?b17c165';
var result = url.replace(/-large\b/, '-t500x500');
Try ng-style: 尝试ng-style:
<div class="track-artwork" ng-style="background-image: url('{{ track.artwork_url | filter: artworkRegex }}');">
https://docs.angularjs.org/api/ng/directive/ngStyle https://docs.angularjs.org/api/ng/directive/ngStyle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.