这里我有一个带空格的字符串,我想将空格替换为一个破折号'-'。
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列
答案 0 :(得分:2)
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>
答案 1 :(得分:0)
另一种方法是创建一个执行正则表达式的$ scope函数。然后,您只需从视图中调用该函数即可:
$scope.cardChange = function() {
return $scope.card.toLowerCase().replace(/ /g,'-');
};
<img ng-src="images/cards/{{cardChange()}}.png"