javascript - div not showing after setting display='block'; -
it works div not hidden, start off display set 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 of detailstemplate (these partial views)
<form ng-submit="submit()" name="assessmentform" id="assessmentform"> <!-- todo: don't use table 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 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 don't set display none in ng-include src="skillstemplate"... works fine, except first time appears underneath assessmentform , doesn't go away until click 1 of buttons.
how hide skillstable first time, , display upon click?
instead of hard-coding style="display:none"
on ng-include
, try using ng-show
, ng-hide
@petraveryanov suggested:
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 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; };
Comments
Post a Comment