CODEWITHSUNDEEP
htmlangularjs
Subhankar
Subhankar

Reputation: 692

Appending html tag to $scope in angularjs

I want to append html tag to every element in id and show it in text box like 1 x,2 x,3 x.(x is close button using ×)

I am using the following code.

My html tag

<input type="text" id="receiver" class="form-control input-sm" ng-model="to" />

Angularjs controller

$scope.to="";
$scope.id=[1,2,3];
$scope.append = function ($event) {
      $scope.to=$scope.to+id[0]+('<div class="close" data-dismiss="modal">&times;</div>');
}

But I am getting following output :

1 <div class="close" data-dismiss="modal">&times;</div>,2<div class="close" data-dismiss="modal">&times;</div>,3<div class="close" data-dismiss="modal">&times;</div>

Can any one help me.

Upvotes: 1

Views: 563

Answers (1)

Hamdi Douss
Hamdi Douss

Reputation: 1113

You have two issues with your solutions:

  1. You want to provide an HTML, but this HTML is escaped and treated/displayed as a string in your final output. In order to prevent the HTML from being escaped, you have to use the ng-bind-html directive inside of ng-model. Don't forget to declare ngSanitize as a module dependency.
  2. You are trying to include HTML inside an input tag. This won't be possible and most browsers will get this HTML out of the input tag (making it a sibling rather than a child). You have to redesign what you want to do, so the container of 1 x, 2 x...is not an input.

Upvotes: 1

Related Questions