1

ディレクティブを使用してフォームを検証する必要があります。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 }

誰でも私を助けることができますか？

4

1 に答える 1

1

すべての値を保持するオブジェクト配列を持つことができ、それを詳しく監視できます。
コントローラーで:

$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と、すぐにビューに反映されます。

プランカーサンプル

于 2015-11-25T20:07:42.857 に答える