Struggling to hide/show a div using AngularJS, I have gone through multiple tutorials with no success. Finally opted for the code snippet mentioned in this link, but still facing issues.
Can anyone assist me in identifying the problem?
PS: Using angular 1.6.3
<html data-ng-app="crm">
<head>
<title>Product Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
............
<style type="text/css">
.animate-show-hide.ng-hide {
opacity: 0;
}
.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
transition: all linear 0.5s;
}
.check-element {
border: 1px solid black;
opacity: 1;
padding: 10px;
}
</style>
<script type="text/javascript">
it('should check ngHide', function() {
var checkbox = element(by.model('checked'));
var checkElem = element(by.css('.check-element'));
expect(checkElem.isDisplayed()).toBe(true);
checkbox.click();
expect(checkElem.isDisplayed()).toBe(false);
});
</script>
</head>
<body data-ng-controller="ProductController">
<div class="col-md-8 col-sm-8 col-xs-8" style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;">
<div class="panel panel-info spacer"><!-- <button type="button" class="close" data-dismiss="alert">x</button> -->
<div class="panel-heading"><input type="checkbox" data-ng-model="checked" aria-label="Toggle ngHide"/><b> Product Form</b></div>
<div class="panel-body">
<div class="check-element animate-show-hide" data-ng-hide="checked">
<form class="form-horizontal" name="prodForm" novalidate>
<div class="form-group">
.....
</div>
....
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"> </script>
<script type="text/javascript" src="angular/angular-animate.js"></script>
</body>
</html>