How to make JSON elements containing phone numbers rendered on browser so that they are clicked to call on that number

Question

I have a Phone.json with contents like :

   {
        "Call": "Hi, Please contact the custom care at (119)239-9999 for further discussions"
    },
    {
        "Call": " For emergency dial 911 as soon as possible"
    }

I need to display the above string on mobile browser and make them click to call using tel protocol

Following is the approach that ive used

My index. html :

<body ng-controller="PhoneListCtrl">

    <ul  ng-repeat="phone in phones">
        <li>
         <a ng-click="convertContactNumbers(phone.Call)">{{phone.Call}}</li>
    </ul>
</body>

Controller :

myApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http)
    {
        $http.get('Phone.json').
                success(function(data)
                {

                    $scope.phones = data;

                });
                $scope.convertContactNumbers = function(st)
                {
            if (st.match((/(((\(?\+?1?\)?)\s?-?)?((\(?\d{3}\)?\s?-?\s?))?\s?\d{3}\s?-?\s?\d{4}){1}/gm)))
            {
                st = st.replace(/(((\(?\+?1?\)?)\s?-?)?((\(?\d{3}\)?\s?-?\s?))?\s?\d{3}\s?-?\s?\d{4}){1}/gm, "<a href='tel:$1'>$1</a>");

                return(st);
            }
            else
            {
                st = st.replace(/([0-9]{3})/, "<a href='tel:$1'>$1</a>");

                return(st);
            }

                }
    }]);

The issue is now to handle the st which holds "For emergency dial <a href='tel:911'>911</a> as soon as possible" so that it renders as an HTML page to make the links clickable.How can I do it?

Your code has lots of indentation problems. It makes it really hard to read and understand... even for you in the future. — Matthias, May 30 '14 at 15:19
The two regular expressions can be combined into one with `|`, and the surrounding logic removed: http://plnkr.co/edit/IW2xHQel3lCSJIKuuQ2h?p=preview. Also `return` shouldn't have round brackets—it’s not a function call. (There are some remaining problems with the regex: it shouldn’t match the space before the number, and it assumes NANPA.) — deltab, May 30 '14 at 16:04

score 2 · Answer 1 · edited May 23 '17 at 12:05

See this question: How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

It tells angular to render string as html.

myApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

And the view:

<ul  ng-repeat="phone in phones">
    <li  ng-bind-html="convertContactNumbers(phone.Call) | unsafe"></li>
</ul>

Working: http://plnkr.co/edit/eV04J9gjjzJ8h3IGM4cZ?p=info

How to make JSON elements containing phone numbers rendered on browser so that they are clicked to call on that number

1 Answers1