如何删除AngularJS绑定中的所有字符串空格？

Question

我试着这样做:

<div id="{{mystring.replace(/[\s]/g, \'\')}}"></div>

但它不起作用."mystring"是一个$scope带有字符串的对象,例如"my string is this",我想从视图中删除空格.

Answer 1

只需创建一个专用过滤器:

angular.module('filters.stringUtils', [])

.filter('removeSpaces', [function() {
    return function(string) {
        if (!angular.isString(string)) {
            return string;
        }
        return string.replace(/[\s]/g, '');
    };
}])

并称之为:

<div id="{{'hi there'| removeSpaces}}"></div>

Answer 2

如果你只是需要在一两个地方,它可能更容易拆分和加入:

$scope.boundString = 'this is a string with spaces'

你可以在模板中做到这一点:

<span>my string is: {{ boundString.split(' ').join('') }}</span>

你会得到:

my string is: thisisastringwithoutspaces

另一种提到的方法是正则表达式版本('g'用于全局):

<span>my string is: {{ boundString.replace(/ /g, '') }}</span>

我想重点是你可以对表达式中的字符串做任何你想做的事情.这些示例是关于Angular脏检查的不良约定.在Angular中,绑定函数(string.replace,string.split)在绑定到模板的表达式时以不同的方式与指定值(字符串,布尔值)进行求值.必须在Angular知道是否更新DOM之前评估绑定函数的结果.这可能比大型应用程序昂贵.我建议使用另一个变量来跟踪不间隔的值:

$scope.noSpaces = $scope.boundString.replace(/ /g, '');

HTML:

<span>{{ noSpaces }}</span>

这样,当触发摘要循环时,Angular将检查noSpaces是否已更改,而不是评估boundString.replace(//g,'').

如果你正在重复怎么办？好问题.

for (var idx = 0, idx < $scope.boundIterable.length, i++) {
    $scope.boundIterable[i].noSpaces = $scope.boundIterable[i].boundString.replace(/ /g, '');
}

HTML:

<ul ng-repeat="iterable in boundIterable">
    <li>{{ iterable.noSpaces }}</li>
</ul>

Answer 3

提到的指令非常有效.但是,如果要删除较小文本的空格,可以使用

.split(" ").join("")

这取代了完整的空间,而.replace(" ","")不仅仅取代了第一个空间.