Question

这里我有一个带空格的字符串，我想将空格替换为一个破折号'-'。

var card = "A World Elite Warrior";

console.log("card = " + card.toLowerCase().replace(/ /g,'-'));

输出是a-world-elite-warrior，但我只想在html模板中使用它作为如下的angularjs表达式：

<img ng-src="images/cards/{{card.toLowerCase().replace(/ /g,'-')}}.png"

它不起作用，错误消息是：

错误：[$ parse：syntax]语法错误：令牌'/'不是主要的表达式的第61列

Answer 1

AngularJS在视图中不支持正则表达式。为了解决这个问题，您可以编写一个简单的过滤器来应用正则表达式替换。这是一个如何在您的情况下执行此操作的示例。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.card = "A World Elite Warrior";
    console.log("card = " + $scope.card.toLowerCase().replace(/ /g, '-'));
  })
  .filter('dashes', function() {
    return function(input) {
      input = input || '';
      return input.toLowerCase().replace(/ /g, '-');
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{ card | dashes }}
</div>

Answer 2

另一种方法是创建一个执行正则表达式的$ scope函数。然后，您只需从视图中调用该函数即可：

$scope.cardChange = function() {
    return $scope.card.toLowerCase().replace(/ /g,'-');
};

<img ng-src="images/cards/{{cardChange()}}.png"

如何在angularJs表达式中使用该正则表达式？

2 个答案: