Question

我在使用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 && ....

因此，当每个字段都被填充时，块引用将变得可见，但它不起作用。

Answer 1

嘿你的方式主要问题是，当用户填写最后一个文本框中的任何随机数据时，当他填写一封信时，div将会对他可见 - 尽管你做了什么改进代码。

我建议的是 - 在填写数据后，您希望显示的部分使用ng-show="whatever"。

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

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

如果您想进一步澄清，请与我们联系。

Answer 2

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

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

Answer 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

Answer 4

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

中

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

使用Angular ng-show显示div

5 个答案: