Jak mogę przekształcić funkcję jQuery w jednej dyrektywie AngularJS? - javascript, jquery, angularjs, dyrektywa, brak duplikatów

Muszę zweryfikować formularz za pomocą dyrektywy, aby AngularJS mógł włączyć lub wyłączyć przycisk przesyłania formularza.

Mam funkcję w jQuery, ale potrzebuję, aby AngularJS obserwował to zachowanie.

Ta funkcja porównuje dane wejściowe, aby zapobiec powielaniu informacji w każdym z nich.

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

To jest funkcja

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();
});

i CSS

label.error { color: red }

Czy ktoś może mi pomóc?

Odpowiedzi:

1 dla odpowiedzi № 1

Możesz mieć tablicę obiektów do przechowywania wszystkich wartości i dokładnie to obserwuj.
W kontrolerze:

$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.

Każde wejście w twojej tabeli jest powiązane z ng-model do obiektu w $scope.currencies tak, aby głęboki zegarek natychmiast zobaczył wszelkie zmiany. Możesz wygenerować listę wejść za pomocą ng-repeat dyrektywa:

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

Następnie dla przycisku przesyłania, tak <input type="submit" ng-disabled="duplicates"></input>

Jeśli chcesz, możesz następnie dodać przyciski, aby dodać lub usunąć elementy $scope.currencies, i natychmiast zostanie to odzwierciedlone w widoku.

Próbka Plunkera

---