How to use ng-href with absolute url?

Question

I'm still new to angularjs, and I have a problem that I seem to not be able to find solution, and I don't have time to go look into angular source.

This is my scenario:

I have some json data with collection of urls that I want to show on screen. I have an element with ng-repeat="link in links" and inside I have

<a ng-href="{{link.url}}">{{link.title}}</a>

That works, but all links are pointing to mydomain/apppath/valueoflink.title I want them to be absolute, only valueoflink.title without any prefix.

How to tell angular that it is absolute not relative url?

Answer 1

As Goran said, his solution will work only if all urls are like 'www.google.com'.

If you have a combination of different types of the urls, e.x. 'www.google.com', 'https://github.com', 'http://goo.gl', 'github.com', you can use ng-href with an angular filter:

<a ng-href="{{link.url|myFilter}}">{{link.title}}</a>

and a filter, which will append 'http://' to your url, if it starts with 'www':

'use strict';
myApp.filter("myFilter", function () {
    return function (link) {
        var result;
        var startingUrl = "http://";
        var httpsStartingUrl = "https://"; 
        if (link.startWith(startingUrl) || link.startWith(httpsStartingUrl)) {
            result = link;
        }
        else {
            result = startingUrl + link;
        }
        return result;
    }
});
String.prototype.startWith = function (str) {
    return this.indexOf(str) == 0;
};

Answer 2

I solved it by prefixing data in json with 'http://' to make them trully absolute urls, and angularjs respects that.

Then I understood that angular is actually not doing anything with value, it is just putting it there as it is, and it is my fault to see that.

updating code to this solves problem when all urls are like 'www.google.com'

<a ng-href="http://{{link.url}}">{{link.title}}</a>

Plain old 'inspect element' uncovered issue, and I ignored the fact that ng-href binds from {{value}} syntax, so this is why my first attempt to put ng-href="'http://'+{{value}}" failed and led me to ask question prematurely, but I'm not sure if I should delete it as I may not be only one making such mistake.