There is a Phone.json file with the following contents:
{
"Call": "Hi, Please contact the custom care at (119)239-9999 for further discussions"
},
{
"Call": " For emergency dial 911 as soon as possible"
}
The goal is to display the above strings on a mobile browser and enable users to click to call using the tel protocol
Here is the implemented approach:
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 in handling the st variable which contains
"For emergency dial <a href='tel:911'>911</a> as soon as possible"