使用 Angular ng-show 显示 div

Question

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

<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

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

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

Answer 2

改变这个

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

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

Answer 4

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

Answer 5

你好，主要问题是，当用户在最后一个文本框中填充任何随机数据时，当他填充一个字母时，div 将对他可见 -不管你对代码做了什么改进。

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

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

要调用触发器，您可以做各种事情 - 您可以在最后一个文本框上使用 ng-change 并使用其特定型号名称检查所有文本框的值，我希望您知道这一点。

如果您想对此进行进一步说明，请告诉我。

使用 Angular ng-show 显示 div

Show div using Angular ng-show

javascript

angularjs

ng-show

angularjs-ng-show