Appending html tag to $scope in angularjs

Question

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">×</div>,2<div class="close" data-dismiss="modal">×</div>,3<div class="close" data-dismiss="modal">×</div>

Can any one help me.

I don't think its possible to do what you are doing. You cannot have HTML inside an Input tag. — Dwijen
– Dwijen, Commented Feb 24, 2016 at 6:28
can you check whether this linke helps you... [Link] (stackoverflow.com/questions/14242531/…) — Sunil Bharath
– Sunil Bharath, Commented Feb 24, 2016 at 7:57

Hamdi Douss · Accepted Answer · 2016-02-25 09:15:03Z

1

You have two issues with your solutions:

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.
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.

answered Feb 25, 2016 at 9:15

Hamdi Douss

1,1131 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Appending html tag to $scope in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related