Div is not displayed after setting display = 'block';
It works for a div that is not hidden yet, but I start with display set to none.
Html
<div class="container-fluid">
<div class="row">
<button class ="col-md-6" ng-click="showAssessments()">Product Groups</button>
<button class="col-md-6" ng-click="showSkills()">Skills</button>
</div>
</div>
<ng-include src="detailsTemplate"></ng-include>
<ng-include src="skillsTemplate" style="display:none"></ng-include>
</div>
html detailsTemplate (these are partial views)
<form ng-submit="submit()" name="assessmentForm" id="assessmentForm">
<!-- TODO: don't use table for layout -->
<table class="table table-striped table-bordered" assessment-input-tabber>
//......
</table>
</form>
html of skillsTemplate
<form ng-submit="submit()" id="skillsTable">
<table class="table table-striped table-bordered" assessment-input-tabber>
......
</table>
</form>
Here are my controller.js functions
$scope.showSkills = function(){
document.getElementById('assessmentForm').style.display = 'none';
document.getElementById('skillsTable').style.display = "block";
};
$scope.showAssessments = function(){
document.getElementById('skillsTable').style.display = "none";
document.getElementById('assessmentForm').style.display = "block";
};
if i dont set display to none in ng-include src = "skillsTemplate" ... it works great except that the first time it shows up under my grading method and doesn't disappear until i click one of the buttons.
How do I get it to hide the skillsTable the first time and then show it on click?
source to share
Instead of hard-coding style="display:none"
to ng-include
try to use ng-show
, and ng-hide
as suggested @PetrAveryanov:
HTML:
<ng-include src="detailsTemplate"></ng-include>
<ng-include src="skillsTemplate"></ng-include>
DetailsTemplate:
<form ng-submit="submit()" name="assessmentForm" id="assessmentForm" ng-show="assessmentForm">
...
skillsTemplate:
<form ng-submit="submit()" id="skillsTable" ng-show="skillsTable">
...
Then in your controller use:
$scope.assessmentForm = true;
$scope.skillsTable = false;
$scope.showSkills = function(){
$scope.assessmentForm = false;
$scope.skillsTable = true;
};
$scope.showAssessments = function(){
$scope.assessmentForm = true;
$scope.skillsTable = false;
};
source to share