Adding "http://" to ng-model in AngularJS

Looking for a solution to automatically add "http://" to a URL input if it's not already present. Preferably without using $watch as there are numerous inputs in the same controller...

Any suggestions on how to handle this?

Answer №1

One effective solution is to use a classic regex on the blur event:

<div ng-blur="check(thismodel)"></div>

#

$scope.check = function($url){
  if (!/^(?:(ftp|http|https)?:\/\/)?(?:[\w-]+\.)+([a-z]|[A-Z]|[0-9]){2,6}$/gi.test($url)) {
      $url = "http://" + $url;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Divide a picture with the help of javascript

Is there a way to utilize JavaScript to extract sections of an image and save them in an array, then showcase them randomly on an HTML5 canvas? ...

The young ones whose height is 80% that of their taller parent's

Achieving the Desired Height In order to set a div with 80% of the height of its parent element without a defined height, I am aiming for a responsive effect. The Layered Layout Issue Within my layout consisting of five layers - .header, .site, .contain ...

Adjust variable values when the window is resized

I've been working on getting some variable values to update when the window is resized. After researching, I learned that it's recommended to declare the variables outside of the .resize function scope and then try to change their values within ...

Unexpected behavior from HTML5 number input field

Is there a way to prevent users from entering values outside the specified max and min attributes? The constraints work when using the arrows in the input field, but not when typing directly into it. Note: I am considering utilizing angularjs for this fun ...

Is the background color change function with AJAX not functioning properly when using array values?

Let me simplify my issue. I have an AJAX call to fetch a JSON array with "aht_value". Based on this value, I am creating a color gradient from green to red (creating a heat map). The values are being output correctly. The issue: The problem lies within m ...

Route in Node.js for event binding

Currently, I am using expressjs in combination with nowjs and binding some events to the now object directly within the route when it is accessed. However, this approach feels messy and I am concerned that every time the route is accessed, the events are e ...

Searching for a value in Mongodb using a dynamic key with Node.js

I have been attempting to retrieve a value associated with a key in MongoDB, but so far I have been unsuccessful. Here is an example of my output: { "_id" : { "$oid" : "52cfc91adbffcbe08ccf94b0"} , "customerInfo" : "value"} For instance, if the user inpu ...

Utilizing a try/catch block to handle exceptions arising from unhandled promise re

I decided to intentionally test my async function by querying a table that does not exist. This way, I could generate an error on purpose. async function getPosts() { try { const connection = await dbConnection() const result = await connection. ...

Encountering the error message "handleChange is not a function" when trying to select a date in Material UI

Encountering an error message 'handleChange is not a function' when selecting a specific date in the DatePicker component. The DatePicker component is nested within the Controller component of react-hook-form. The expected behavior is to display ...

Utilize Bootstrap multiselect for extracting values from optgroups and options

Having a select element with optgroups and bonded values, the structure is as follows: <select id="example-dataprovider-optgroups" multiple="multiple"> <optgroup label="Lime No. 2" value="b3a2eff6-5351-4b0f-986 ...

Utilizing VueJS and Lodash: The technique for extracting an array of objects exclusively featuring a specific key string

I am attempting to extract certain data from an Object that has a string _new attached to it. Explore the code on Codesandbox: https://codesandbox.io/s/vibrant-bardeen-77so1u?file=/src/components/Lodash.vue:0-353 This is what my data looks like: data.j ...

Removing a particular item from an array in Node.js

Recently, I have started learning Node.js and encountered a scenario with some data that looks like this https://i.sstatic.net/xpijl.png I am looking to modify the song object by removing the artist "hanna," ultimately leaving the song without any artist ...

Synchronous AJAX calls can cause the browser to become unresponsive

I am facing an issue with my jQuery Ajax requests as they need to be synchronous, causing the browser to freeze until a response is received. The main problem I encounter is that I need to display a spinning icon while waiting for the response, but the fre ...

what is the best way to switch classes between 2 buttons using Angular8

Is there a way to create a toggle button effect that adds an 'active' class to BTN1 when it's clicked, and then removes the 'active' class from BTN1 and add it to BTN2 when BTN2 is clicked? Currently, my code only allows for addin ...

Assessing attributes within the templateUrl

I'm trying to retrieve the value of an attribute within the templateUrl function of my directive. <my-dirc type="type"></my-dirc> In my directive (my-dirc), the code looks like this: return { scope : { type : = }, templateUrl ...

How can you bypass certain optional arguments in Angular filters?

Currently, I am utilizing the default currency filter: {{ value | currency }} My goal is to customize only the decimal places and have Angular determine which currency symbol to display. Is there a way to achieve this? The workaround I've found invo ...

Dealing with adding up optional values from v-model in Vue.js can be a challenging task

Within this function, I need to display the remaining amount. remainingAmount: function() { return parseFloat(this.sumAmount) - (parseFloat(this.cash) + parseFloat(this.kNet) + parseFloat(this.kNetOnline)); } The three parameters cash ...

I'm looking to develop a custom CKEditor plug-in that will allow users to easily drag and drop elements within the editor interface

Upon observing that dragging and dropping text or images within a CKEditor editor instance does not trigger the "change" event, I devised a temporary solution by implementing code triggered by the "dragend" event. However, my ultimate goal is to create a C ...

What is the best way to adjust the width of these elements for a perfect fit?

I'm currently working on a website where I have arranged squares in a grid layout. My goal is to make these squares perfect, with equal width and height. The only issue I'm encountering is that they tend to change between fitting two and three sq ...

Enabling clients to access all static files from a Node.js + Express server

My index.js file serves as a node.js server : var express = require('express'); var app = express(); const PORT = process.env.PORT || 5000; var serv = require('http').Server(app); app.get('/', function(req, res) { res.sen ...