Add prefix value to input filed in AngularJS

Question

I have requirement like this.

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

I have the HTML code like this. Once the user enter text in website URL field I need to add prefix to the URL with http://.

If the user is entering the URL with http://. then no need add the http:// prefix.

How can i do with in AngularJS .

Please suggest

Answer 1

Ok, there is also another possibility to use a formater and parser to complete the task at the model level. I put the code in here from another solution, since the code there is hosted external:

https://stackoverflow.com/a/19482887/3641016

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) { // Need to add prefix if we don't have http:// prefix already AND we don't have part of it 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>