繁体   English   中英

如何在一个AngularJS指令中转换jQuery函数?

[英]How I can transform a jQuery function in one AngularJS directive?

我必须使用指令来验证表单,以便AngularJS能够启用或禁用提交表单按钮。

我在jQuery中有一个函数,但我需要AngularJS监视此行为。

此功能比较输入以防止每个输入重复信息。

<form id="myform">
<table>
    <tr>
        <td><input name="currency1" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency2" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency3" class="required" unique="currency"/></td>
    </tr>
    <tr>
        <td><input name="currency4" class="required" unique="currency"/></td>
    </tr>
</table>

这是功能

jQuery.validator.addMethod("unique", function(value, element, params) {
     var prefix = params;
     var selector = jQuery.validator.format("[name!='{0}'][name^='{1}'][unique='{1}']", element.name, prefix);
     var matches = new Array();
     $(selector).each(function(index, item) {
         if (value == $(item).val()) {
             matches.push(item);
         }
     });

     return matches.length == 0;
          }, 
       "Valor Repetido"
     );


     jQuery.validator.classRuleSettings.unique = {
          unique: true
     };

     $("#myform").validate();

     $("#validate").onBlur(function() {
          $("#myform").valid();
     });

和CSS

label.error { color: red }

谁能帮我?

您可以拥有一个对象数组来保存所有值,然后仔细观察。
在控制器中:

$scope.currencies =
    [{'value':'val1'},{'value':'val2'},{'value':'val1'} ];

$scope.$watch('currencies', function(){
    $scope.duplicates = false;
    var found = [];
    $scope.currencies.forEach(function(currency){
        if(!(found.indexOf(currency.value)+1))
            found.push(currency.value);
        else $scope.duplicates = true;
    });
},true); //The 'true' last parameter is the signal to deep watch.

表中的每个输入都通过ng-model绑定到$scope.currencies一个对象,以便深度监视将立即看到任何更改。 您可以使用ng-repeat指令生成输入列表:

<tr ng-repeat="currency in currencies">
    <td><input type="text" ng-model="currency.value"></input></td>
</tr>

然后对于“提交”按钮,使<input type="submit" ng-disabled="duplicates"></input>

如果需要,您可以添加按钮以在$scope.currencies添加或删除元素,它会立即反映在视图中。

柱塞样品

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM