使用Angular将json对象中的通用文本字符串转换为有效的URL

时间:2015-12-18 01:58:54

标签: javascript angularjs json

这是我的第一个Stack Overflow问题,所以请耐心等待(我几乎总能找到我需要的东西或者自己弄清楚但是这次因为我刚刚和Angular一起弄湿了所以不同。)

我有一个指令,它从json对象中获取名称和url,并使用名称和href构建html。问题是,来自url对象的json响应是用户从CMS输入的常规文本字符串,并且它当前未在后端验证。因此,URL可以看起来像www.blah.xxx或http://blah.xxx等等。有没有使用插件的Angular方法,我可以告诉输出检查url是否有http://如果没有,那么添加它?或者是否有一个很好的插件可以轻松完成这个技巧?

angular.module('pwrApp')
    .directive("getPrimaryCareProviderName", [function() {
        return {
            restrict: "A",
            link: function(scope, elem, attrs) {

            scope.$watch('primaryCareProvider', function() {
              var output = "";

                if(scope.primaryCareProvider.site == "" || scope.primaryCareProvider.site ===null){
                    output = scope.primaryCareProvider.name;
                }else{
                    output = '<a href="'+scope.primaryCareProvider.url+'" target="_BLANK">'+scope.primaryCareProvider.name+"</a>";
                }

                elem.html(output);
            });
        }
    }
}]);

1 个答案:

答案 0 :(得分:1)

您可以随时检查它是否已包含网址开头的http:

 if(scope.primaryCareProvider.site == "" || scope.primaryCareProvider.site ===null){
           output = scope.primaryCareProvider.name;
     }
     else{
           var url = scope.primaryCareProvider.url
           if (url.indexOf("http://") != 0){
              url = "http://" + url;
           }
           output = '<a href="'+url+'" target="_BLANK">'
                    +scope.primaryCareProvider.name+'</a>';
     }

但如果您想要更复杂的方式,请查看此snippet