設置display ='block'後div不顯示;

它適用於尚未隱藏的div，但我首先將display設置爲none。設置display ='block'後div不顯示;

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>

detailsTemplate的HTML（這些是局部視圖）

<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>

skillsTemplate

<form ng-submit="submit()" id="skillsTable"> 
    <table class="table table-striped table-bordered" assessment-input-tabber> 
     ...... 
    </table> 
</form>

這裏的HTML是我的controller.js功能

 $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"; 
     };

如果我不在ng-include src =「skillsTemplate」中設置顯示爲空......它可以很好地工作，除了第一次出現在我的評估窗體下方並且不會消失，直到我點擊其中一個鈕釦。

第一次如何獲得它隱藏技能表，然後顯示點擊？

來源

2015-05-13 user2881006

什麼aabout採用NG-顯示/ NG-隱藏 –

我不是JS挺起來，但我不能幫助，但注意到你對單引號第一個'沒有'和第二個'沒'的雙引號會影響它嗎？ – Zeddy

https://jsfiddle.net/gk2eoym5/請繼續提供工作代碼 – eapo

而不是硬編碼style="display:none"上ng-include，請嘗試使用ng-show和ng-hide爲@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"> 
...

然後，在你的控制器，使用：

$scope.assessmentForm = true; 
    $scope.skillsTable = false; 
    $scope.showSkills = function(){ 
     $scope.assessmentForm = false; 
     $scope.skillsTable = true; 
    }; 
    $scope.showAssessments = function(){ 
     $scope.assessmentForm = true; 
     $scope.skillsTable = false; 
    };

來源

2015-05-13 23:27:26

設置display ='block'後div不顯示;

回答

相關問題