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:-
TEST.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<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>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.min.js"></script>
<script src="TEST.js"></script>
</body>
</html>
TEST.js
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)