AngularJS supports .html(), .text() jQuery functionality. Here in below examples we can see how to set text or html to an element.

Steps to set text to an elemnt :

  1. Get angular element of html element
  2. Use .text() method to set text to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.text('This is text. Here html tags will be displayed like normal tags. Example : <span style="font-weight:bold;"> Styled Text</span>');     

Set Text using ng-bind

ng-bind is for binding text to HTML element
<html ng-app="" ng-controller="myCtrl">
.....
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
.....
<input ng-model="divText"/>
.....
<div style="border:1px solid #ccc;padding:10px;" ng-bind="divText"></div>
<script>
function myCtrl($scope) {
  $scope.divText = 'some text';
}
</script>
Try It Your Self

Steps to set html to an element :

  1. Get angular element
  2. Use .html() method to set html to that angular element
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.html('This is html. Here html tags will be mixed with page. Example : <span style="font-weight:bold;"> Styled Text</span>');     

Set HTML using ng-bind-html

ng-bind-html is for binding HTML to element
<html ng-app="myApp" ng-controller="myCtrl">
.....
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
.....
Enter some text in below text field <br/>
<input ng-model="divHtmlVar"/><br/><br/>
<div style="border:1px solid #ccc;padding:10px;" ng-bind-html="divHtmlVar"></div>
<script>
var myApp = angular.module('myApp', ['ngSanitize'])
function myCtrl($scope) {
    $scope.divHtmlVar = '<b>main html</b>';
}
</script>
Try It Your Self

11 comments:

  1. Good Example to Set Text or Html to div using AngularJS, i am interesting to learn AngularJs 4, give me more examples

    ReplyDelete
  2. The great service in this blog and the nice technology is visible in this blog. I am really very happy for the nice approach is visible in this blog and thank you very much for using the nice technology in this blog
    Angularjs course in chennai

    ReplyDelete
  3. Hi, great to see your website. I like the content and the research done behind every aspect of your blog. It looks great and very knowledgeable. Keep it up the good work. PCNSE questions answers

    ReplyDelete
  4. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.

    rpa training in bangalore | best rpa training in bangalore | rpa course in bangalore | rpa training institute in bangalore | rpa training in bangalore | rpa online training | rpa training in Chennai

    ReplyDelete
  5. Nice tutorial. Thanks for sharing the valuable information. it’s really helpful. Who want to learn this blog most helpful. Keep sharing on updated tutorials…
    python course in pune
    python course in chennai
    python Training in Bangalore

    ReplyDelete
  6. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
    Best Devops Training in pune
    Data science training in pune | Data Science training institute in Pune

    ReplyDelete
  7. When I initially commented, I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several emails with the same comment. Is there any way you can remove people from that service? Thanks.
    Amazon Web Services Training in Pune | Best AWS Training in Pune
    AWS Online Training | Online AWS Certification Course - Gangboard
    Top 110 AWS Interview Question and Answers | Advanced AWS interview Questions and Answers – AWS jobs

    ReplyDelete
  8. Nice post. Thanks for sharing! I want people to know just how good this information. It’s interesting content and Great work.
    Thanks & Regards,
    VRIT Professionals,
    No.1 Leading Web Designing Training Institute In Chennai.
    And also Those who looking for
    HTML courses training institutes in Chennai
    CSS courses training institutes in Chennai
    Bootstrap courses training institutes in Chennai


    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts