尝试使用 ng-model 将空格替换为破折号

Question

我是 AngularJS 的新手，正在尝试创建一个简单的应用程序，该应用程序允许我将文件上传到我的 Laravel 驱动的网站。我希望表单能够向我显示上传项目的预览。所以我使用 ng-model 来实现这一点，我偶然发现了以下内容：

我有一个带有一些基本引导样式的输入，并且我正在使用 AngularJS 模板的自定义括号（因为正如我提到的，我正在使用 Laravel 及其刀片系统）。我需要从输入中删除空格（当我输入时）并用破折号替换它们：

<div class="form-group"><input type="text" plaeholder="Title" name="title" class="form-control" ng-model="gnTitle" /></div>

然后我有这个：

<a ng-href="/art/[[gnTitle | spaceless]]" target="_blank">[[gnTitle | lowercase]]</a>

我的 app.js 看起来像这样：

var app = angular.module('neoperdition',[]);

app.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

app.filter('spaceless',function(){
    return function(input){
        input.replace(' ','-');
    }
});

我收到以下错误： 类型错误：无法读取未定义的属性“替换”

我知道我需要在过滤之前定义该值，但我不确定在哪里准确定义它。而且，如果我定义了它，我不希望它改变我的占位符。

Answer 1

您的过滤器中缺少一些东西。首先，您需要返回新字符串。其次，正则表达式不正确，您应该使用全局修饰符来替换所有空格字符。最后，您还需要检查字符串是否已定义，因为最初模型值可以是

undefined

，因此未定义的

.replace

会抛出错误。

大家一起：

app.filter('spaceless',function() {
    return function(input) {
        if (input) {
            return input.replace(/\s+/g, '-');    
        }
    }
});

演示：http://plnkr.co/edit/5Rd1SLjvNI18MDpSEP0a?p=preview

Answer 2

Bravi 试试这个过滤器 例如 {{X |将空格替换为短划线}}

 app.filter('replaceSpaceToDash', function(){
                var replaceSpaceToDash= function( input ){

                        var words = input.split( ' ' );
                         for ( var i = 0, len = words.length; i < len; i++ )
                             words[i] = words[i].charAt( 0 ) + words[i].slice( 1 );
                         return words.join( '-' );
                     };
                     return replaceSpaceToDash;
            });

Answer 3

如果您使用的是新的 Angular 版本并且

[(ngModel)]="title"

，您可以像这样使用 getter 和 setter：

private _title: string = '';

public set title(title: string) {
    this._title = title.replace(/\s+/g, '-');
}
public get title(): string {
    return this._title;
}

但是有很多方法可以处理这个问题，例如使用带有事件的表单控件，或者指令等等。

Answer 4

首先，您必须通过将过滤器的名称添加到数组中来将过滤器注入到模块中：

var app = angular.module('neoperdition',['spaceless']);

其次，过滤器的函数必须返回一些东西。 String.prototype.replace() 返回一个新的 String 。所以你必须退货:

app.filter('spaceless',function(){
    return function(input){
        return input.replace(' ','-');
    }
});

编辑：dfsq 的答案比我的准确得多。