Question

我的angularJS标记中有这个标记

<div class="photo" style="background-image: url('{{item.mageURL}}')"></div>

生成字符串的{{item.mageURL}}表达式：

http://example.com/photos/68678/stamp

我想将其更改为：

http://example.com/photos/68678

到目前为止，没有成功，我试过......

<div class="photo" style="background-image: url('{{item.mageURL.str.substring( 0, str.indexOf( 'stamp' ) )}}')"></div>

但它只返回一个空字符串。

知道如何在AngularJS中做到这一点

Answer 1

您必须将substring方法应用于item.mageURL.str字符串。

'{{item.mageURL.str.substring( 0, item.mageURL.str.indexOf( '/stamp' ) )}}'

另一种方法是使用split方法。

<div class="photo" style="background-image: url('{{item.mageURL.str.split('/stamp')[0]}}')"></div>

function MyCtrl($scope) {
  $scope.item={
      "mageURL":{
            "str":'http://example.com/photos/68678/stamp'
        }
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="MyCtrl">
    <div class="photo" style="background-image: url('{{item.mageURL}}')"></div>
    {{item.mageURL.str.split('/stamp')[0]}}<br>
    {{item.mageURL.str.substring( 0, item.mageURL.str.indexOf( '/stamp' ) )}}
  </div>
</div>

Answer 2

请使用＆＃39; ng-style＆＃39; https://docs.angularjs.org/api/ng/directive/ngStyle

纳克式=＆＃34; {＆＃39;背景图像＆＃39; ：＆＃39; url（＆＃39; + item.mageURL.str.substring（0，item.mageURL.str.indexOf（＆＃39; stamp＆＃39;））+＆＃39;）＆＃39; }＆＃34;

<div class="photo" ng-style="{'background-image' : 'url(' +  item.mageURL.str.substring( 0, item.mageURL.str.indexOf( 'stamp' ) )+')'}"></div>

Answer 3

我认为为此目的创建一个小指令要好得多，就像这样

app.directive('bgImg', function() {
  return function(scope, elem, attrs) {
    elem.css('background-image', someTransformFn(attrs.bgImg));
  }
})

模板中的长JS表达式是真正的痛苦，与此相比：

<div bg-img="{{vm.someImg}}">

AngularJS从表达式{{}}中的字符串中删除子串

3 个答案: