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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -