尝试使用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(' ','-');
    }
});

我收到以下错误:TypeError:无法读取未定义的属性'replace'

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

Answer 1

您的过滤器中缺少一些东西.首先,您需要返回新的字符串.辅助,正则表达式不正确,您应该使用全局修饰符来替换所有空格字符.最后你还需要检查字符串是否已定义,因为最初的模型值可以是undefined,所以.replace在undefined时会抛出错误.

全部一起:

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

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