Question

我再次遇到问题。我从API获取信息并显示相似的复选框。当我试图添加验证时，问题就出现了。这是我的代码的一部分：

(function() {
    'use strict';
    var fact = {
        templateUrl: './app/components/fact.components.html',
        controller: factCtrl
    };
    angular.module('fApp').component('odcFacturas', fact);
    factCtrl.$inject = ["$scope", "couponApi"];

    function factCtrl($scope, couponApi) {
            var vm = this;
            vm.clientOrder = null;
            vm.all = false;
            vm.sendData = function() {
                vm.apiData = couponApi.get({
                    idOrder: vm.idOrder
                }).$promise.then(function(data) {
                    for (var i = 0; i < data.Response.length; i++) {
                        data.Response[i].Select = vm.all;
                    }
                    vm.coupons = data.Response;
                    vm.combo = data.Response.length > 0;
                });
            }

在这里我调用信息，我的代码的下一部分检查所有复选框：

vm.selectAll = function() {
 for (var i = 0; i < vm.coupons.length; i++) {
     vm.coupons[i].Select = vm.all;
 }
 if (vm.all == 0) {
     alert("Select at least one coupon");
 }
}

如何使用提交按钮触发三次验证？我的意思是：我想做的是验证三种情况：

如果选中复选框＆＃34;选中所有复选框＆＃34;选中，提交
如果没有选中的复选框，则显示提醒消息
如果选中了至少一个复选框（或＆＃39; n＆＃39;复选框），提交

在HTML视图中，我有这个：

<div class ="container-fluid">
<div class="row">
    <div class="col-md-6">
        <div class="cbx input-group">
            <div class="checkbox" name="imtesting" ng-show="$ctrl.coupons.length > 0">
                    <label><input type="checkbox"
                           ng-show="$ctrl.coupons.length > 0"
                           name="allCoupons"
                           ng-model="$ctrl.all"
                           ng-click="$ctrl.selectAll()"/>Select all coupons</label>



                    <ul>
                        <li ng-repeat="c in $ctrl.coupons">
                        <input type="checkbox"
                               name="couponBox"
                               ng-model="c.Select"
                               ng-click="$ctrl.result()"
                               required/>{{c.CodeCoupon}}
                            <br>
                        </li>
                    </ul>
                <label class="label label-danger" ng-show="submitted == true && !ctrl.newTest()">Select at least one coupon</label>
            </div>
        </div>
    </div>
</div>

希望你能帮助我。

提前完成。

Answer 1

您可以使用每个优惠券对象的Select属性，例如

vm.canSubmit = function() {
    for(var i = 0; i< vm.coupons.length; i++)
    {
        if (vm.coupons[i].Select) {
            return true;
        }
    }
    return false;
}

Answer 2

重做您处理selectsAll功能的方式。当你使用角度时，有一个名为scope.$apply的东西实际上正在运行，它告诉dom如果对象或属性已经改变则更新。有时，如果你按照你使用它的方式使用for循环，它就不会注册一个变化。

试试这个，它应该有效：

vm.selectAll = function()
    {
         vm.all = !vm.all;
         vm.coupons.forEach(function(o){
            o.Select = vm.all;
         })

    }

 vm.submit = function(){
     var checked = 0;
     vm.coupons.forEach(function(o){
        if(o.Select === true)
           checked +=1;
     })
     if(vm.all || checked > 0){
         //submit here
     }
     else if(checked === 0){
         //error
     }
 }

这将有两种方式。如果选中则会检查所有内容，如果未选中则会取消全部检查。该验证适用于所有三种情况。

使用AngularJs验证复选框

2 个答案: