Utilize AngularJS to append a prefix value to an input field

Question

Utilize AngularJS to append a prefix value to an input field

My current requirement involves the following:

<label>Website Address</label>
                    <span><input type="text" class="form-factor" data-ng-model="websiteUrl"/></span>

Currently, I have HTML code that looks like this. When a user enters text in the website URL field, I want to automatically add a prefix of http:// to the URL.

If the user includes http:// in the URL they enter, then I do not want to add it again.

How can I achieve this using AngularJS?

Please provide your suggestions

javascript angularjs angularjs-directive

Answer 1

Answer №1

Alright, here's another approach you can take to accomplish this task at the model level using a formatter and parser. I've included the code snippet below from a different source since it's hosted externally:

angular.module('app', [])
  .controller('testCtrl', function($scope) {
    $scope.input1 = "";
    $scope.input2 = "";
  })
  .filter('prefixHttp', function() {
    return function(input) {
      return input.indexOf("http://") == 0 ? input : 'http://' + input;
    };
  })
  .directive('httpPrefix', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, controller) {
        function ensureHttpPrefix(value) {
          // Add prefix if no http:// prefix already present
          if (value && !/^(https?):\/\//i.test(value) && 'http://'.indexOf(value) !== 0 && 'https://'.indexOf(value) !== 0) {
            controller.$setViewValue('http://' + value);
            controller.$render();
            return 'http://' + value;
          } else
            return value;
        }
        controller.$formatters.push(ensureHttpPrefix);
        controller.$parsers.splice(0, 0, ensureHttpPrefix);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
  <label>prefix the output
    <input ng-model="input1" />{{input1 | prefixHttp}}
  </label>
  <br/>

  <label>prefix the model
    <input ng-model="input2" http-prefix/>{{input2}}
  </label>
</div>

Answer 2

Alright, here's another approach you can take to accomplish this task at the model level using a formatter and parser. I've included the code snippet below from a different source since it's hosted externally:

angular.module('app', [])
  .controller('testCtrl', function($scope) {
    $scope.input1 = "";
    $scope.input2 = "";
  })
  .filter('prefixHttp', function() {
    return function(input) {
      return input.indexOf("http://") == 0 ? input : 'http://' + input;
    };
  })
  .directive('httpPrefix', function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, controller) {
        function ensureHttpPrefix(value) {
          // Add prefix if no http:// prefix already present
          if (value && !/^(https?):\/\//i.test(value) && 'http://'.indexOf(value) !== 0 && 'https://'.indexOf(value) !== 0) {
            controller.$setViewValue('http://' + value);
            controller.$render();
            return 'http://' + value;
          } else
            return value;
        }
        controller.$formatters.push(ensureHttpPrefix);
        controller.$parsers.splice(0, 0, ensureHttpPrefix);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
  <label>prefix the output
    <input ng-model="input1" />{{input1 | prefixHttp}}
  </label>
  <br/>

  <label>prefix the model
    <input ng-model="input2" http-prefix/>{{input2}}
  </label>
</div>

Utilize AngularJS to append a prefix value to an input field

Answer №1

Similar questions

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

The method item.appendChild does not exist as a function

The term 'EmployeeContext' is being utilized as a namespace in this scenario, although it actually pertains to a type.ts(2702)

Here is a unique rewrite: "Utilize jQuery to extract all data-id and amount from an HTML page, then send it through an

Here is a guide on updating HTML table values in Node.js using Socket.IO

Is it better to have dynamic application loading in Angular+MVC or opt for two separate applications?

Exploring the ancestry of Mongo

Creating multiple nested ng-repeats in an AngularJS table

What mechanisms do frameworks use to update the Document Object Model (DOM) without relying on a

Revolving mechanism within React.js

Retrieving data from the database without the need to reload the page

ag-grid's onGridReady function is not functioning properly

Is there a way to prevent Mac users from using the back and refresh buttons on their browser?

Utilizing JSON File as an Array in a Node.JS Environment

Sorting by price using the ng-repeat directive is not suitable for this

What is the best way to slice text in JavaScript?

Guide on utilizing Three.js OrbitControl with several objects

Engage with elements enhanced by jQuery functionality

Deleting Firestore ancestor documents and sub-collections that do not exist

Incorporate a variable into a function by integrating it