使用 Angular ng-show 显示 div答案

【问题标题】：Show div using Angular ng-show使用 Angular ng-show 显示 div
【发布时间】：2016-02-26 19:44:37
【问题描述】：

我在使用 ng-show 和 $pristine 时遇到了一些问题。

这里是代码（also on CodePen）：

<blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine">
    <p>{{comment.rating}} Stars</p>
    <p>{{comment.comment}}</p>
    <footer>{{comment.author}}
</blockqoute>

当表单上的每个字段都填满后，我想显示包含我的重复项的 div，但我希望它在一些仍然为空时隐藏。

我尝试使用

!comment.[index].$pristine && ....

所以当每个字段都被填满时，块引用会变得可见，但它不起作用。

【问题讨论】：

标签： javascript angularjs ng-show angularjs-ng-show

【解决方案1】：

嘿，你的主要问题是，当用户在最后一个文本框中填充任何随机数据时，当他填写一个字母时，div 对他来说是可见的——尽管你做了任何改进编码。

我的建议是 - 使用 ng-show="whatever" 填充数据后要显示的部分。

在您的控制器开始时将其设为 false $scope.whatever = false;，现在用户将看不到它；当用户填写所有文本框时，调用触发器并检查数据是否有效，然后$scope.whatever=true; - 现在您的部分将可见。

要调用触发器，您可以执行各种操作 - 你可以在最后一个文本框上使用ng-change，并使用它们的特定型号名称检查所有文本框的值，我希望你知道。

如果您想进一步澄清这一点，请告诉我。

【讨论】：

感谢您的解释！我试过你的方法后，结果比我希望的要好
我可以知道你为什么删除最近的问题吗？
这是一个非常不成熟的问题，是一个低质量的问题。
@GandalftheWhite 同意，但别担心，您至少可以尊重我所花费的时间，并接受答案并将您的问题作为社区 wiki 对吗？这是坏人，我花时间，另一个人也花时间纠正我的答案，你就拿着水果逃跑了！ :(
@PraveenKumar 我接受您的要求，对此我深表歉意。你能告诉我另一个人的名字吗？我不应该那样做，但我可以弥补。

【解决方案2】：

我相信你可以指定ng-hide作为className来默认隐藏它。

<blockquote ng-show="whatever" class="ng-hide"

【讨论】：

【解决方案3】：

改变这个

<blockquote ng-show="!comment.author.$pristine && !comment.rating.$pristine && !comment.comment.$pristine">
                          <p>{{comment.rating}} Stars</p>
                          <p>{{comment.comment}}</p>
                          <footer>{{comment.author}}
                    </blockqoute>

到这里

<blockquote ng-show="!commentForm.author.$pristine && !commentForm.comment.$pristine">
                              <p>{{comment.rating}} Stars</p>
                              <p>{{comment.comment}}</p>
                              <footer>{{comment.author}}, {{comment.date | date}}</footer>
                        </blockqoute>

请注意，我使用表单来检查表单属性，而不是范围属性。只需将 comment 更改为 commentForm（这是您的表单名称）。

More info about form controllers
Working codepen

【讨论】：

@GáborCsikós 它在我制作的代码笔中工作。检查您是否设置了表单名称并在 ng-show 中使用该名称，或者制作一个 codepen 以查看可能出现的问题。

【解决方案4】：

我会将表单输入的值绑定到控制器中的一些变量，并在它们的ng-change="controller.validate()" 上运行验证代码，这样您就可以检查字段是否不为空并且输入是否正确，然后设置isBlockquoteVisible 变量, 那就是<blockquote ng-show="{{controller.isBlockquoteVisible}}" ...

【讨论】：

【解决方案5】：

<blockquote ng-hide="comment.author.$pristine && comment.rating.$pristine && comment.comment.$pristine">
   <p ng-show="!comment.rating.$pristine">{{comment.rating}} Stars</p>
   <p ng-show="!comment.comment.$pristine">{{comment.comment}}</p>
   <footer ng-show="!comment.author.$pristine">{{comment.author}}</footer>
</blockquote>

【讨论】：