尝试使用 ng-model 用破折号替换空格 [英] Trying to replace spaces with dashes using ng-model

问题描述

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

我有一个包含一些基本引导程序样式的输入，并且我正在为 AngularJS 模板使用自定义括号(因为正如我所提到的，我正在使用 Laravel 及其刀片系统).我需要从输入中删除空格(在我输入时)并用破折号替换它们:

然后我有这个:

[[gnTitle |小写]]

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

var app = angular.module('neoperdition',[]);app.config(function($interpolateProvider){$interpolateProvider.startSymbol('[[').endSymbol(']]');});app.filter('spaceless',function(){返回函数(输入){input.replace(' ','-');}});

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

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

解决方案

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

一起:

app.filter('spaceless',function() {返回函数(输入){如果(输入){return input.replace(/\s+/g, '-');}}});

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

I'm new to AngularJS and trying to create a simple app that will allow me to upload files to my Laravel driven website. I want the form to show me the preview of what the uploaded item will look like. So I am using ng-model to achieve this and I have stumbled upon the following:

I have an input with some basic bootstrap stylings and I am using custom brackets for AngularJS templating (because as I mentioned, I am using Laravel with its blading system). And I need to remove spaces from the input (as I type it) and replace them with dashes:

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

And then I have this:

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

And my app.js looks like this:

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

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

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

I get the following error: TypeError: Cannot read property 'replace' of undefined

I understand that I need to define the value before I filter it, but I'm not sure where to define it exactly. And also, if I define it, I don't want it to change my placeholder.

解决方案

There are few things missing in your filter. First of all you need to return new string. Secondary, regular expression is not correct, you should use global modifier in order to replace all space characters. Finally you also need to check if the string is defined, because initially model value can be undefined, so .replace on undefined will throw error.

All together:

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

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

这篇关于尝试使用 ng-model 用破折号替换空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！