验证指令代码在ng重复中的每个项目上执行

Question

我正在使用Angular和Breeze编写一个单页应用程序。我使用data-ng-repeat在页面上显示了一组实体。

我通过使用data-ng-hide和data-ng-show交替隐藏和显示一个"编辑模式"div和一个"显示模式"div来对实体进行就地验证。一次只能有一个实体处于编辑模式。

在编辑模式div中，我有一组使用data-ng-model绑定到Breeze实体的输入，并且我正在使用data-z-validate进行Breeze主体验证，如Breeze实验室的Angular验证指令文档中所述：

http://www.breezejs.com/breeze-labs/breezedirectivesvalidationjs

HTML看起来是这样的（为了清晰起见，将其缩小）：

<div data-ng-controller="payees as vm">
    <div data-ng-repeat="payee in vm.payees">
        <!--Display mode content-->
        <div data-ng-hide="payee.editing">
            <span>{{payee.name}}</span>
            <span>{{payee.addressLine1}}</span>
            <span>{{payee.town}}</span>
            <span>{{payee.postcode}}</span>
            <!--Some more markup here to switch to edit mode-->
        </div>
        <!--Edit mode content-->
        <div data-ng-show="payee.editing">
            <input data-z-validate data-ng-model="payee.name" />
            <input data-z-validate data-ng-model="payee.addressLine1" />
            <input data-z-validate data-ng-model="payee.town" />
            <input data-z-validate data-ng-model="payee.postcode" />
            <!--Some more markup here to save changes or cancel edit mode-->
        </div>
    </div>
</div>

问题是，每次我输入其中一个输入时，中继器中每个项目的每个输入都会执行validate指令代码，即使是隐藏的项目。我可以通过在调试器中设置断点来看到这一点。当我有很多实体时，这肯定会使页面的响应性非常差。在我的代码示例中，如果我有100个收款人，那么验证代码将执行400次（100个收款人为4个属性中的每一个执行一次），而实际上，它只需要执行4次。

我的问题是：是否有一种方法可以只对当前处于编辑模式的实体进行验证，或者等效地，只对未隐藏的输入进行验证？

Answer 1

对于互斥条件（例如，具有相同值的ngShow和ngHide），您应该使用ngSwitch指令，如AngularJS常见问题解答：中所建议的

特别要注意的是，应该使用强大的ng-switch，而不是几个互斥的ng-show。

在您的情况下，使用ngSwitch并处于"显示模式"，<input>标记将不再存在，并且验证指令将不会执行。

<div data-ng-controller="payees as vm">
    <div data-ng-repeat="payee in vm.payees" data-ng-switch="payee.editing">
        <!--Display mode content-->
        <div data-ng-switch-when="false">
            <span>{{payee.name}}</span>
            <span>{{payee.addressLine1}}</span>
            <span>{{payee.town}}</span>
            <span>{{payee.postcode}}</span>
            <!--Some more markup here to switch to edit mode-->
        </div>
        <!--Edit mode content-->
        <div data-ng-switch-default>
            <input data-z-validate data-ng-model="payee.name" />
            <input data-z-validate data-ng-model="payee.addressLine1" />
            <input data-z-validate data-ng-model="payee.town" />
            <input data-z-validate data-ng-model="payee.postcode" />
            <!--Some more markup here to save changes or cancel edit mode-->
        </div>
    </div>
</div>