Come posso trasformare una funzione jQuery in una direttiva AngularJS? - javascript, jquery, angularjs, direttiva, no-duplicates

Devo convalidare un modulo con una direttiva, perché AngularJS può essere in grado di abilitare o disabilitare il pulsante di invio del modulo.

Ho una funzione in jQuery, ma ho bisogno che AngularJS guardi questo comportamento.

Questa funzione confronta gli input per evitare la duplicazione di informazioni in ciascuno di essi.

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

Questa è la funzione

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

e CSS

label.error { color: red }

Qualcuno può aiutarmi?

risposte:

1 per risposta № 1

Puoi avere un array di oggetti per contenere tutti i valori e controllarlo a fondo.
Nel controller:

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

Ogni input nella tua tabella è associato a ng-model a un oggetto in $scope.currencies in modo che l'orologio profondo veda immediatamente eventuali modifiche. È possibile generare l'elenco degli input utilizzando il file ng-repeat direttiva:

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

Quindi per il pulsante di invio, avere <input type="submit" ng-disabled="duplicates"></input>

Se lo desideri, puoi aggiungere pulsanti per aggiungere o rimuovere elementi $scope.currenciese si rifletterebbe immediatamente nella vista.

Campione di plunker

---