AngularJS ngHref why lowercase

533 Views Asked by let4be At 05 June 2014 at 12:34

I'm trying to bind href attribute to my link using ngHref, but AngularJS lowercases it. How can I avoid this behavior?

<a ng-href="http://preview-{{preview.hash}}.test.com/">{{preview.title}}</a>

It lowercases preview.hash, I'd like not to do this.

Original Q&A

There are 1 best solutions below

dmullings On 05 June 2014 at 13:50 BEST ANSWER

It is not angular that is lowercasing. It is the browser. The browser lowercases everything in the domain portion of the URL. (Type in GOOGLE.COM and you go to google.com)

Take a look at this example: http://jsbin.com/zupupupo/4/edit?html,js,output

<body ng-app="myApp">
    <div ng-controller="MyController">
        1. <a ng-href="http://preview-{{preview.hash}}.test.com/">{{preview.title}}</a> Dynamic in the domain
        <br />
        2. <a ng-href="http://preview.test.com/{{preview.hash}}">{{preview.title}}</a> - Dynamic after domain
     </div>  

  3. <a href="http://preview-TeST.test.com/TeST">Hard Coded Link</a>
</body>

<script>
var myApp = angular.module('myApp',[]);

myApp.controller('MyController',function($scope){
  $scope.preview = {
    hash: 'TeST',
    title: 'NG HREF Dynamic Link'
  };
});
</script>

If you inspect the value angular is using the casing that came from the value. When you click/hover over the link the browser lowercases it. (example 1)

Upper case characters after the domain portion are preserved. (example 2)

To demonstrate this has nothing to do with angular, this is hard coded link with upper case in the domain and after the domain portion of the url. (example 3)

AngularJS ngHref why lowercase

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-HREF

Trending Questions

Popular # Hahtags

Popular Questions