Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Add HTML Content To div Using AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.52k
    Comment on it

    Hi All,

    Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you have append your controls dynamically.

    A simple example in which a item added is added to unsorted list:-


    <!DOCTYPE html>
        <title>Page Title</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
      <body ng-app="myApp" ng-init="value = 'App'">
        <div ng-controller="FrstCtrl">
        <p>Inserting html</p>
        <div ng-bind-html="UsedToInsertHTMLCode"></div>
        <button ng-click="addItem()">Add Item</button>
        <script src=""></script>
        <script src=""></script>
        <script src="TEST.js"></script>


    var myApp = angular.module('myApp', ['ngSanitize']);
    myApp.controller('FrstCtrl', function ($scope , $sce ) {
    	console.log("its here");
        $scope.addItem = function() {
        someHtmlVar = '<ul><li>add me to html</li></ul>';
        $scope.UsedToInsertHTMLCode = $sce.trustAsHtml(someHtmlVar);  };

    Now you can see that , when you click on a button Add Item a item is add below Inserting HTML.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: