Angularjs - Eşsiz girişler nasıl kontrol edilir ve eğer geçersiz

olduğu gibi yinelenen bir işaret varsa, kullanıcının ng-repeat tarafından oluşturulan metin alanlarına girdi girmesi gereken bir durum var. Kullanıcı önceden girilmiş bir değeri girerse, hem yeni hem de var olan değerler false olarak doğrulanmalıdır. Değerlerden biri (mevcut veya yeni) değişirse, doğrulama buna uygun olarak güncellenmelidir.Angularjs - Eşsiz girişler nasıl kontrol edilir ve eğer geçersiz

Oldukça çeşitli seçenekler denedim, şu anda bu yaklaşıyor, ama hala% 100 değil.

HTML:

<body ng-app="ap" ng-controller="con"> 
<table> 
    <tr> 
     <td>name</td> 
    </tr> 
    <tr ng-repeat="person in persons"> 
     <td> 
      <ng-form name="personForm"> 
      <div ng-class="{ 'has-error' : 
       personForm.personName.$invalid }"> 
       <input type='text' 
       name="personName" 
       ng-class="empty" 
       ng-model="person.name" 
       ng-change="verifyDuplicate(this, person)"/> 
       </div> 
      </ng-form> 
     </td> 
    </tr> 
</table>

JavaScript: Bu herhangi bir Yardım mutluluk duyacağız

var app = angular.module("ap",[]); 

    app.controller("con",function($scope){ 

    $scope.persons = [ 
     {name: 'a'}, 
     {name: 'b'}, 
     {name: 'c'} 
    ]; 

    $scope.empty = "normal"; 

    $scope.verifyDuplicate = function(domScope, object){ 
     for(var i = 0; i < $scope.persons.length; i++) { 
      if($scope.persons[i].name === object.name && $scope.persons[i] !== object) { 
       domScope.personForm.personName.$setValidity('duplicate',false); 
      } 
      else { 
       domScope.personForm.personName.$setValidity('duplicate',true); 
      } 
     } 
    }; 
});

. İşte

keman Fiddle of code

kaynak

2014-09-18 avn

Ben verifyDuplicate yöntem belirleme ve aynı model geçerliliğini yeniden ayar tutar çünkü gelebileceğini düşününce, bu nedenle modelin tetikleme yöntemi çağırma geçerliliği dayalı olacaktır olduğunu son karşılaştırma döngüde sonuçlanır. Bunu çözmenin

bir yolu koleksiyon bir bütün olarak, ne olursa olsun bir model değişikliği, bu örnekte, yöntem başlatmaya tetiklediği $ setValidity yöntemi kullanılmaz kişilerle ilgili verifyDuplicate yöntem işe izin vermektir bunun yerine, modelin bir izlemesidir özelliği çoğaltma belirtmek için ayarlanır.

HTML:

<ng-form name="personForm"> <div ng-class="{ 'has-error' : personForm.personName.$invalid }"> <input type='number' name="personName" ng-class="empty" ng-model="person.name" ng-change="verifyDuplicate()"/> </div> </ng-form> <div class='error' ng-if='person.isDuplicate'> Duplicate. </div>

JavaScript:

$scope.verifyDuplicate = function() { var sorted, i; sorted = $scope.persons.concat().sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); for(i = 0; i < $scope.persons.length; i++) { sorted[i].isDuplicate = ((sorted[i-1] && sorted[i-1].name == sorted[i].name) || (sorted[i+1] && sorted[i+1].name == sorted[i].name)); } };

JSFiddler: http://jsfiddle.net/luislee818/pkhxkozp/4/

biz $ setValidity, ben onun forma bireysel modeli bağlayan düşünebilirsiniz kullanarak ısrar ederse " ng-init "yönergesi, ancak bu hantal görünüyor ve bu yaklaşımla gidersek daha iyi yollar olabilir.

HTML:

<ng-form name="personForm"> <div ng-class="{ 'has-error' : personForm.personName.$invalid }"> <input type='number' name="personName" ng-init="person.form = personForm" ng-class="empty" ng-model="person.name" ng-change="verifyDuplicate()"/> </div> </ng-form> <div class='error' ng-show= 'personForm.personName.$error.duplicate'> Duplicate. </div>

JavaScript:

$scope.verifyDuplicate = function() { var sorted, i, isDuplicate; sorted = $scope.persons.concat().sort(function (a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0; }); for(i = 0; i < $scope.persons.length; i++) { isDuplicate = ((sorted[i-1] && sorted[i-1].name == sorted[i].name) || (sorted[i+1] && sorted[i+1].name == sorted[i].name)); sorted[i].form.personName.$setValidity('duplicate',!isDuplicate); } };

JSFiddle: http://jsfiddle.net/luislee818/nzd87f1s/1/

kaynak

2014-10-01 10:55:25

Büyük, bunu verecek bir ben, bir boşluk bulmak gerçek çalışır umut en kısa sürede gitmek Dünya sorununa uygulamak istiyorum. – avn

Harika çalışıyor, yardım için teşekkürler. – avn

@ dapeng-li Bu benim için çalıştı, ancak birim testi için iyi değil. Bu özel doğrulama direktifine dönüştürülebilir mi? –

Angularjs - Eşsiz girişler nasıl kontrol edilir ve eğer geçersiz

cevap

İlgili konular