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

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"