我们可以在一个 div 标签中包含 ng-show 和 ng-if 吗？答案

【问题标题】：can we have ng-show and ng-if in one div tag?我们可以在一个 div 标签中包含 ng-show 和 ng-if 吗？
【发布时间】：2017-01-24 14:51:25
【问题描述】：

下面的代码 sn -p 不起作用请建议任何其他方式

<html>
`<div id="tablediv" ng-model="ngtable">
<div ng-show="ngtable">
<div ng-if="currentdevicetype == 'condition1'">
<!-- Other code to display contents -->
</div>`
</div>
</div>
</html>

【问题讨论】：

是的，你可以拥有。

标签： angularjs ng-show angularjs-ng-if

【解决方案1】：

是的，你可以，两者是不同的。

ng-show

当表达式计算结果为false 时设置元素的display:none，而当表达式计算结果为false 时ng-if 从 DOM 中删除元素

【讨论】：

【解决方案2】：

查看这个问题以了解 ng-show 和 ng-if 之间的区别以及在哪里以及如何使用它们：

When to favor ng-if vs. ng-show/ng-hide?

【讨论】：

【解决方案3】：

在您的 html 代码中，您使用了一些错误，因为您将 ng-model 用于 div 。

  <html>
    <div id="tablediv" ng-model="ngtable">
    <div ng-show="ngtable">
    <div ng-if="currentdevicetype == 'condition1'">
    <!-- Other code to display contents -->
    </div>
    </div>
    </div>
 </html>

ng-model 用于绑定任何 inputbox/textarea/select 类标签的值，不能像这样绑定任何值：

<div id="tablediv" ng-model="ngtable">

如果您删除此ng-model，那么您的代码将如下所示：

        <html>
            <div id="tablediv">
            <div ng-show="ngtable">
            <div ng-if="currentdevicetype == 'condition1'">
            <!-- Other code to display contents -->
            </div>
            </div>
            </div>
       </html>

现在，如果ngtable 有一些价值，则意味着ng-show=true 那么

 <div ng-show=true>
            // all the elements are visible on the DOM.
 </div>

但是，如果ngtable 没有任何值，则意味着ng-show=false 那么：

<div ng-show=false>
                // all the elements are not visible on the DOM.
     </div>

在这段代码里面：

<div ng-if="currentdevicetype == 'condition1'">
        <!-- Other code to display contents -->
</div>

如果ng-if="currentdevicetype == 'condition1'"返回true，那么所有元素都会被创建，否则元素不会被创建。

【讨论】：