Question

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

我正在通过“编辑模式”div和“显示模式”div对实体进行实地验证，这些div交替隐藏并使用data-ng-hide和data-ng-show显示。一个实体可以处于编辑模式。

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

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

特别注意应该使用强大的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>

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

1 个答案: