<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.

  <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.

• javascript
• angularjs

• On a side note, your replace syntax should be the other way round. – 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 Commented Apr 17, 2015 at 9:58

4 Answers 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.

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/awk4ttem/2/

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 bee:

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

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