Is it possible to have a string inside an Angular expression? For example:
<p><strong>Phone:</strong> {{ phone }}</p>
Would it be possible to have that <strong> tag inside that expression, so Phone: isn't rendered to the page, unless something is pulled from the {{ phone }} expression?
Hope that makes sense.
Any help is appreciated.
Thanks in advance!
You can use ng-show to show elements only under certain conditions, so in your case you can hide the complete p element if the desired value is not defined using ng-show:
(or you can use ng-if to completely skip that element as Rahil Wazir mentioned in his comment)
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope){
$scope.phone1 = '1234';
$scope.phone2 = undefined;
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-if="phone1"><strong>Phone: {{phone1}}</strong></p>
<p ng-if="phone2"><strong>Phone: {{phone2}}</strong></p>
</div>
</div>
Use ng-show directive.
https://docs.angularjs.org/api/ng/directive/ngShow
Or use ng-hide directive too. Hope it helps.
Yes you can use Strong tag in AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="personController">
Phone: <input type="text" ng-model="phone "><br>
<br>
<p><strong>Phone:</strong> {{ phone }}</p>
</div>
<script>
function personController($scope) {
$scope.phone = "987654321"
}
</script>
</body>
</html>
yes, you can just use {{ 'some random string' + x }}. Here 'x' is a variable defined on the whichever scope this expression is referring to.
string concatenation will happen as you would expect.
ng-if="phone"directive to thepelement