Replace Spaces with - in angular js data binding

Question

  <form role="form" method="POST" action="{{ url('/roles/save') }}" data-ng-app="">    
<div class="form-group">
      <label>Page-Title:</label>
       <input type="text" required value="" data-ng-model="title" name="page_title" class="form-control">                     
</div>

<div class="form-group">
 <label>Page-Alias:</label>
 <input type="text" value="@{{ title }}" name="page_alias" class="form-control">
 </div>

I am new to angular and using simple data-binding so that whenever a user enters the page title the alias gets auto generated but I want to identify the spaces and replace them with a "-" (dash) . For example: whenever the user enters Home Page I want the alias to be Home-Page and even better if it's home-page. I tried doing this

 <input type="text" value="@{{title.replace(/-/g, ' ');}} name="page_alias" class="form-control">

but it doesn't work.

On a side note, your replace syntax should be the other way round. — Ash Clarke
– Ash Clarke, Commented Apr 16, 2015 at 10:53
@xenish, did you find my answer accepted? if so, can you mark it that way? — Slaven Tomac
– Slaven Tomac, Commented Apr 17, 2015 at 9:58

Ash Clarke · Accepted Answer · 2015-04-16 11:06:49Z

4

"I want to identify the spaces and replace them with a "-" (dash)"

JS

angular.module('app')
    .filter('slugify', function() {
        return function(input) {
            input = input || '';

            return input.replace(/ /g, '-').toLowerCase();
       }
    });

HTML

 <input type="text" value="@{{ title | slugify }}" name="page_alias" class="form-control">

"even better if it's home-page"

I added toLowerCase after the replace to achieve this.

answered Apr 16, 2015 at 11:06

Ash Clarke

4,9071 gold badge40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Slaven Tomac · Accepted Answer · 2015-04-16 11:17:24Z

2

You can create filter for your template:

.filter('replacementFilter', function() {
   return function(input) {
       return input.replace(/ /g, '-');
   }
});

and use it:

 <input type="text" value="@{{ title | replacementFilter }}" name="page_alias" class="form-control">

Check out here:

https://jsfiddle.net/awk4ttem/2/

edited Apr 16, 2015 at 11:17

answered Apr 16, 2015 at 9:51

Slaven Tomac

1,5722 gold badges27 silver badges39 bronze badges

3 Comments

Ash Clarke Over a year ago

Your example is replacing dashes with spaces.

Slaven Tomac Over a year ago

He/she has different description and example :). In example is trying to replace dashes with space, but in description is vice versa. If so, just replace values there.

Ash Clarke Over a year ago

That's because in the example, xenish says that they tried that, but it didn't work. The post title and content indicates the intent.

mohamedrias · Accepted Answer · 2015-04-16 10:00:52Z

0

You can do in two ways: One using replace within the expression and another using awesome angular filter.

   <input type="text" value="@{{ title.replace('-',' ')}}" name="page_alias" class="form-control">

    <input type="text" value="@{{ title | replaceSpaceWithDash : '-'}}" name="page_alias" class="form-control">

app.filter("replaceSpaceWithDash", function() {
    return function(data, delimiter) {
       return data.replace(/\s/g,delimiter);
     }
   });

You can change the delimiter to anything which you pass to the replaceSpaceWithDash filter. Currently am passing -, you can change it later as per your need.

For making it lower case, just use the inbuilt filter | lowercase

So it will become:

value="@{{ title | replaceSpaceWithDash : '-' | lowercase }}"

edited Apr 16, 2015 at 10:00

answered Apr 16, 2015 at 9:55

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

1 Comment

Ash Clarke Over a year ago

Your first example is replacing dashes with spaces.

Reena · Accepted Answer · 2015-04-16 10:13:14Z

If you wanted on -blur of textbox you can used in this way:

<input type="text" required value="" data-ng-model="title" ng-blur="removeSpaces(title)" name="page_title" class="form-control">

Js:

angular.module('app', [])
.controller('myController', function($scope) {
$scope.removeSpaces = function(text) {   

   $scope.title =  text.split(' ').join('-').toLowerCase();
  }
});

Updated:

   <input type="text" required value="" data-ng-model="title" ng-blur="removeSpaces(title)" name="page_title" class="form-control">  
   <input type="text" value="@{{ alias }}" name="page_alias" ng-modal="alias" class="form-control">

JS:

angular.module('app', [])
.controller('myController', function($scope) {
$scope.removeSpaces = function(text) {   

 $scope.alias =  text.split(' ').join('-').toLowerCase();
}
});

Collectives™ on Stack Overflow

Replace Spaces with - in angular js data binding

4 Answers 4

"I want to identify the spaces and replace them with a "-" (dash)"

"even better if it's home-page"

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

"I want to identify the spaces and replace them with a "-" (dash)"

"even better if it's home-page"

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related