CODEWITHSUNDEEP
angularjsng-bind-htmlng-bind
Greg
Greg

Reputation: 197

angularjs surround bound data with brackets

I need to surround a bound data value with square brackets so it will display as follows:

[somevalue] Which I have done like so:

[<span ng-bind="person.id"></span>]

I can do this fine but I am running into an issue when I attempt to apply this to a dive which has a bound value, eg:

<div ng-bind-html="anotherValue | trustAsHtml"></div>

I want the [somevalue] to appear within the anotherValue div, but when I try the following code the second value isn't displayed:

<div ng-bind-html="anotherValue | trustAsHtml"> [<span ng-bind="person.id"></span>]</div>

I'm new to angularjs so I'm probably doing something completely stupid, my apologies if that is the case, thanks.

Upvotes: 0

Views: 676

Answers (2)

Brian Baker
Brian Baker

Reputation: 996

You can do it the way you are trying like so:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.person = {id: 2}
  $scope.anotherValue = 
  $sce.trustAsHtml('Hi[<span>'+$scope.person.id+'</span>]');
});

And in the markup:

<div ng-bind-html="anotherValue"></div>

Upvotes: 1

Erwin
Erwin

Reputation: 3366

ng-bind-html replaces the inner-html of an element. So in this case the anotherValue would overwrite the person.id. If you move the inner span out the div it will become visible again

Upvotes: 1

Related Questions