3

我遇到了一些问题ng-show和$pristine。

这是代码（也在 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 && ....

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

4

5 回答 5

2

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

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

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

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

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

于 2016-02-26T20:01:29.073 回答
1

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

<blockquote ng-show="whatever" class="ng-hide"
于 2016-02-26T19:47:56.990 回答
1

改变这个

<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（这是您的表单名称）。

于 2016-02-26T19:53:37.260 回答
0

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

于 2016-02-26T19:53:45.127 回答
0 
<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>
于 2016-02-26T20:00:33.397 回答