Question

嘿伙计们，我正在尝试编写一个指令，可以检查包含数字百分比的多个输入字段的验证。该指令应该能够检查所有这些输入的总和是否为100。所以这是我的HTML代码：

<form class="form-horizontal" name="form1" id="form1" method="post" novalidate>
 <input type="number" class="form-control" name="mtp" id="mtp" ng-model="mtp" placeholder="Percentage of the first main task" min="1" max="100" percentCheck required>
 <button class="btn btn-primary">Clone</button>  
</form>

此输入是原始输入字段。我还编写了一个js函数，每次单击按钮时都会克隆此输入。它工作得很好。这是我写的指令，用于检查我上面提到的验证

app.directive('percentCheck', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {
        scope.$watch(attr.percentCheck, function(viewValue) {
            var sum = 0;
            angular.forEach(viewValue, function() {
                sum += parseInt($(this));
            });
            alert(sum);
            if (sum === 100) {
                return true;
            }
            else {
                return false;
            }
        }, true); //enable deep dirty checking
    }
}; });

它根本不起作用。谁能告诉我问题出在哪里并给我一些建议？我只是一个新手，所以我需要很多帮助。在此先感谢;）

Answer 1

以下适用于我。这是angular: Validate multiple dependent fields的略微修改。如果它适合您，请不要忘记勾选： - ）

指令：如果您输入例如该指令也将无效字符而不是数字。

        app.directive("validatePercentage", function () {

            return {

                restrict: "AE",

                require: "ngModel",

                link: function (scope, elem, attr, ctrl) {

                    scope.$watch(attr["validatePercentage"], function (array) {

                        var sum = 0;
                        for (var i = 0; i < array.length; i++) {
                            sum = sum + parseInt(array[i].percentage);
                        }

                        if (sum === 100) {
                            ctrl.$setValidity("validatePercentage", true);
                        } else {
                            ctrl.$setValidity("validatePercentage", false);
                        }

                    }, true); 

                }

            };

        });

控制器：在此处添加您需要检查的字段数。

        $scope.itemsToCheck = [

            {"itemId": "1", "percentage": ""}, 
            {"itemId": "2", "percentage": ""}, 
            {"itemId": "3", "percentage": ""}

        ]

HTML：

        <form>
            <div ng-repeat="n in itemsToCheck>
                <input 
                    class="form-control" 
                    type="text" 
                    name="{{n.itemId}}" 
                    ng-model="n.percentage" 
                    validate-percentage="itemsToCheck"/>
            </div>
        </form>

验证多个克隆的总和输入100％

1 个答案: