web-dev-qa-db-ja.com

ng-modelを使用してスペースをダッシュ​​に置き換えようとしています

私はAngularJSを初めて使用し、ファイルを自分のLaravel駆動型Webサイトにアップロードできるようにする簡単なアプリを作成しようとしています。アップロードしたアイテムのプレビューをフォームに表示したいそのため、これを達成するためにng-modelを使用していて、次のことに遭遇しました。

基本的なbootstrapスタイリングの入力があり、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'を読み取れません

フィルタリングする前に値を定義する必要があることは理解していますが、正確に定義する場所がわかりません。また、定義した場合、プレースホルダーを変更したくありません。

angularjsangularjs-filterangular-ngmodel
12
Bravi

フィルターに欠けているものはほとんどありません。まず、新しい文字列を返す必要があります。次に、正規表現が正しくありません。すべてのスペース文字を置き換えるには、グローバル修飾子を使用する必要があります。最後に、最初にモデルの値がundefinedになる可能性があるため、文字列が定義されているかどうかも確認する必要があるため、.replace on undefinedはエラーをスローします。

すべて一緒に：

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

デモ： http://plnkr.co/edit/5Rd1SLjvNI18MDpSEP0a?p=preview

17
dfsq

Braviは、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;
            });
1
Pradip Wawge