Angular.js Directive to display in bold a piece of the string - html

Question

I have a table in angular that is displayed this way:
<table class="row">
<tr ng-repeat="x in myWelcome | filter :search">
<td>{{$index}}</td>
<td>{{x._id}}</td>
<td>{{x.email}}</td>
<td ng-bold-number>{{x.phone}}</td>
<td>{{x.latitude}}</td>
<td>{{x.longitude}}</td>
<td><input type="button" value="Remove" ng-click="removeRow(x._id)"/></td>
</tr>
</table>
The phone column is displayed like this : [phone].
I want to create a directive "ng-bold-number" so that the number inside the parenthesis (that is 210 here) would be displayed in bold style like this [phone]
So I made this directive in Angular :
app.directive('ngBoldNumber', [function() {
return {
restrict: 'A',
link: function($scope, iElement, iAttrs) {
var x = $scope.x.phone.substring(0, $scope.x.phone.indexOf('(')+1)
var y = $scope.x.phone.substring($scope.x.phone.indexOf('(')+1, $scope.x.phone.indexOf(')')+1)
$scope.x.phone=x+y;
}
};
}])
which I am able to cut down the string but I didn't find a way to display it in bold. Can you help me please?

Answer 1

Suppose you would want to go with a directive, you can do it like this : check my plunker here
the directive function itself looks like this:
function boldNumber(){
return {
restrict:"A",
template:"{{pre}} <b>{{bold}}</b> {{post}} ",
replace:false,
scope:{
inBold:"#"
},
link: function(scope, element, attr){
console.log(scope.inBold);
scope.pre = scope.inBold.substring(0, scope.inBold.indexOf('(')+1);
scope.bold = scope.inBold.substring(scope.inBold.indexOf('(')+1, scope.inBold.indexOf(')')+1);
scope.post = scope.inBold.substring(scope.inBold.indexOf(')')+1);
}
};
Basically, what I have added is a template, showing the cuts you made. I had to make one more cut (the final part after the closing ')' ). You have to set replace: false, so your template is appended into the directive element.
Then i have an isolated scope, containing the text that needs to be cut, the phone number. I did simplify the example in my plunker a bit.
The html looks like this then:
<table class="row">
<tr>
<td bold-number in-bold="{{x.phone}}">tryout</td>
<td><input type="button" value="Remove" ng-click="removeRow(x._id)"/></td>
</tr>
</table>
as you can see, the attribute in-bold contains the value for the isolated scope in the directive function. if you need more information, or if something is not clear, please ask.
EDIT: the part about inBold:"#"
in your directive function, when u add the option 'scope', you create a scope that only counts for the directive. The directive itself can no longer reach the scope of the controller. That is why it is called an 'isolated scope'. It exists for your protection. In large single page apps, you might accidentally change scope variables from the controller which you did not want, if you don't have an isolated scope.
However, we do want to be able to pass variables from the controller to the directive, right? So there is the possibility to build in 'border control' for passing variables from controller to directive. In your html, you pass an extra attribute which is called: in-bold. it has a value. This is your 'border control'. The name 'in-bold' gets transformed to camel case (inBold) for use in javascript.
So what it basically means is that the isolated scope of the directive now has a variable called inBold. The value of this variable is passed to the directive from the controller by the attribute "in-bold". This is important that they have the "same" name. For us humans, in-bold is not the same as inBold, but for angular it is. Everything in angular-html connected with a dash (-) gets transformed in javascript to camel case. So for angular in-bold(html) = inBold(javascript). In the directive, you can now access that passed variable as scope.inBold or {{inBold}}.
Then what is the "#" about? well, the "#" tells the directive that we are dealing with a String value, which is only single-bound. That means that if we change the value of inBold in the directive, the changes will not be visible in the controller! This is important. If you would want two way binding, you would need to use the following:
scope:{
inBold:"="
}
I hope that was a bit clear to you...

Answer 2

This is part of working solution to demonstrate how you can make it bold style. Now you can format the rest part of number
angular.module("myApp", [])
.controller('myController', ['$scope', '$log',
function($scope, $log) {
$scope.phone = '[phone]';
$scope.isBold = false;
$scope.countryCode = null;
}
])
.directive('ngBoldNumber', [
function() {
return {
restrict: 'A',
template: '<span ng-class="{bold: isBold}">{{countryCode}}</span><span>{{phone}}</span>',
link: function($scope, iElement, iAttrs) {
//debugger;
var x = $scope.phone.substring(0, $scope.phone.indexOf('(') + 1);
var y = $scope.phone.substring($scope.phone.indexOf('(') + 1, $scope.phone.indexOf(')') + 1);
if (x && y) {
$scope.countryCode = x + y;
$scope.isBold = true;
}
}
};
}
]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="script.js"></script>
<style>
.bold {
font-weight: bold;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myController">
<table class="row">
<tr>
<td ng-bold-number>{{phone}}</td>
</tr>
</table>
</body>
</html>