Попытка заменить пробелы тире с помощью ng-model

Я новичок в 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" из undefined

Я понимаю, что мне нужно определить значение, прежде чем фильтровать его, но я не уверен, где его точно определить. А также, если я его определяю, я не хочу, чтобы он менял местозаполнитель.

ОТВЕТЫ

Ответ 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

Ответ 2

Брави просто попробуй этот фильтр   для eaxample {{X | replaceSpaceToDash}}

 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;
            });

Ответ 3

Сначала вы должны ввести свой фильтр в свой модуль, добавив его в массив:

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

Во-вторых, функция фильтра должна что-то вернуть. String.prototype.replace() возвращает новую строку. поэтому вам нужно вернуть его:

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

Изменить: ответ dfsq намного точнее моего.