设置 display='block' 后 div 不显示；答案

【问题标题】：div not showing after setting display='block';设置 display='block' 后 div 不显示；
【发布时间】：2015-07-25 10:29:50
【问题描述】：

它适用于尚未隐藏的 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>

技能模板的html

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

这是我的 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"... .

如何让它第一次隐藏技能表，然后点击显示？

【问题讨论】：

如何使用 ng-show/ng-hide
我不太喜欢 JS，但我不禁注意到你在第一个 'none' 上有单引号，在第二个 'none' 上有双引号会影响它吗？跨度>
jsfiddle.net/gk2eoym5 请继续工作代码

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

不要在ng-include 上硬编码style="display:none"，而是按照@PetrAveryanov 的建议尝试使用ng-show 和ng-hide：

HTML：

<ng-include src="detailsTemplate"></ng-include>
<ng-include src="skillsTemplate"></ng-include>

详细信息模板：

<form ng-submit="submit()" name="assessmentForm"  id="assessmentForm" ng-show="assessmentForm">
...

技能模板：

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

【讨论】：