Use hyphens instead of spaces in angular js data binding

Question

Use hyphens instead of spaces in angular js data binding

  <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 still learning Angular and experimenting with simple data-binding. I want to automatically generate an alias when a user enters the page title by replacing spaces with dashes. For example, if the user enters "Home Page," I would like the alias to be "Home-Page" or even "home-page." Below is my attempt:

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

Unfortunately, it doesn't seem to be working as intended yet.

javascript angularjs

Answer 1

Answer №1

"My goal is to find all the gaps and substitute them with a "-" (hyphen)"

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

"It would be preferable if it reads as home-page"

I included toLowerCase after the replace method for achieving this.

Answer 2

"My goal is to find all the gaps and substitute them with a "-" (hyphen)"

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

"It would be preferable if it reads as home-page"

I included toLowerCase after the replace method for achieving this.

Answer 3

Answer №2

To customize your template, you have the option to create a filter:

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

Once created, you can use it like this:

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

Find more details here:

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

Answer 4

To customize your template, you have the option to create a filter:

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

Once created, you can use it like this:

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

Find more details here:

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

Answer 5

Answer №3

There are two ways to achieve this: one is by using the replace within the expression, and the other is through an amazing 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 have the flexibility to change the delimiter as needed in the replaceSpaceWithDash filter. Currently, I am using -, but you can modify it later according to your requirements.

To convert everything to lowercase, simply use the built-in filter | lowercase.

This will result in:

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

Answer 6

There are two ways to achieve this: one is by using the replace within the expression, and the other is through an amazing 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 have the flexibility to change the delimiter as needed in the replaceSpaceWithDash filter. Currently, I am using -, but you can modify it later according to your requirements.

To convert everything to lowercase, simply use the built-in filter | lowercase.

This will result in:

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

Answer 7

Answer №4

If you wish to trigger an action on the blur event of a textbox, you can achieve it like this:

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

JavaScript:

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

JavaScript:

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

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

Answer 8

If you wish to trigger an action on the blur event of a textbox, you can achieve it like this:

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

JavaScript:

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

JavaScript:

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

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

Use hyphens instead of spaces in angular js data binding

Answer №1

"My goal is to find all the gaps and substitute them with a "-" (hyphen)"

"It would be preferable if it reads as home-page"

Answer №2

Answer №3

Answer №4

Similar questions

getting properties of an object using AngularJS factory

What is the most efficient method for managing components with dynamic templates and their corresponding data in Vue.js?

In my React JS project, I am using an <Add /> component on two distinct pages. However, I am encountering an issue where only one of the pages is correctly receiving the add count prop

Looking to swap out the final value in a JavaScript array?

Dynamically remove values from other fields in a React Formik form based on checkbox conditions

Can you explain the syntax for the Javascript tag?

Creating a stunning 2D image from a 3D scene through the power of raytracing with webgl and three.js

What is the best way to assign multiple event handlers to Solid.js components within a single HTML element?

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

Is it possible to have unique color tags in Material UI Autocomplete?

When executing npm run dev, an UnhandledPromiseRejectionWarning is triggered

React Context Matters: Troubles Unleashed

Utilizing async await in a JavaScript event: A guide

Encountered an issue while attempting to retrieve data from the HTTP URL

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

Receiving undefined when subscribing data to an observable in Angular

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Using Node.js to convert an array into a string and then appending slashes onto it

What is the best way to display a component based on a certain condition?