On Check/Uncheck of the CheckBox , I am trying to add Or Remove the Corresponding HTML dynamically
On Click of the One Checkbox i want to add
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('One'<br/>');
and on Click of the Two Checkbox i want to add along with One
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.prepend('Two<br/>');
I have tried as shown in below HTML ,On Uncheck but i am unable to Remove HTML
Why not just use ng-repeat again to print out the values pushed in your $scope.selectedNames array?
By nature of having your repeated element be a <div> you get the line break for free. But, you could also do just as easily do <span ng-repeat="n in selectedNames">{{n}}<br /></span>
var app = angular.module('plunker', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["One", "Two", "Three"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if (index < 0) {
$scope.selectedNames.push(name);
var myEl = angular.element(document.querySelector('#divID'));
myEl.prepend('' + name + '<br/>');
} else
$scope.selectedNames.splice(index, 1);
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)" />{{n}}
</div>
<div ng-repeat="n in selectedNames">{{n}}</div>
</body>
</html>Mirror on Plunker: http://plnkr.co/edit/pAIpY4qZpT4SvLgCaYIy?p=preview
