如何驗證刪除行？

我創建了一個指令，驗證行和顯示錯誤是一些行有重複的值，這裏是代碼：如何驗證刪除行？

app.directive('isUniqueRow', function() { 
     return { 
      require: 'ngModel', 
      scope: { 
       ngModel: '=', 
       isUniqueRow: '=' 
      }, 
      link: function(scope, ele, attrs, c) { 
       var rows = scope.isUniqueRow; 
       scope.$watch('ngModel', function(v) { 
        if(!v || v == '') { 
         c.$setValidity('unique', true); 
         return; 
        } 


        var count = 0; 
        for(var i=0;i<rows.length;i++) { 
         if(rows[i].key == v) { 
          count++; 
         } 
        } 
        c.$setValidity('unique', count < 2); 
       }); 
      } 
     } 
    })

它的正常工作，除了一個問題，在這裏看到plunkr：https://plnkr.co/edit/IRkgMPRw3Chd7x43Fzdv?p=preview

問題：

的第一行中鍵入的text1
添加另一行
類型text1再次在第二行，它會顯示錯誤
刪除第一行，錯誤仍然在窗體上。

我該如何解決？

來源

2016-04-13 FarazShuja

只需修改$watch代碼如下：

scope.$watch('isUniqueRow', function() {    // <== Modified line 
    var v = scope.ngModel;        // <== New line 
    if(!v || v == '') { 
    c.$setValidity('unique', true); 
    return; 
    } 


    var count = 0; 
    for(var i=0;i<rows.length;i++) { 
    if(rows[i].key == v) { 
     count++; 
    } 
    } 
    c.$setValidity('unique', count < 2); 
}, true);           // <== Modified line

我們基本上深深地看着（通過在最後通過true）在列表上也。因此，無論何時我們從該列表中刪除/添加/更新任何項目（rows），我們都會再次驗證這些值。

參見下面

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.objs = [{}]; 
 

 
    $scope.add = function() { 
 
    $scope.objs.push({}); 
 
    } 
 

 
    $scope.delete = function(index) { 
 
    $scope.objs.splice(index, 1); 
 
    } 
 
}); 
 

 
app.directive('isUniqueRow', function() { 
 
    return { 
 
    require: 'ngModel', 
 
    scope: { 
 
     ngModel: '=', 
 
     isUniqueRow: '=' 
 
    }, 
 
    link: function(scope, ele, attrs, c) { 
 
     var rows = scope.isUniqueRow; 
 

 
     scope.$watch('isUniqueRow', function() { 
 
     var v = scope.ngModel; 
 
     if (!v || v == '') { 
 
      c.$setValidity('unique', true); 
 
      return; 
 
     } 
 

 

 
     var count = 0; 
 
     for (var i = 0; i < rows.length; i++) { 
 
      if (rows[i].key == v) { 
 
      count++; 
 
      } 
 
     } 
 
     c.$setValidity('unique', count < 2); 
 
     }, true); 
 
    } 
 
    } 
 
})

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.0/angular.js" data-semver="1.5.0"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-repeat="row in objs"> 
 
    <ng-form name="iForm"> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <input name="key" ng-model="row.key" is-unique-row="objs" type="text" /> 
 
      <div ng-show="iForm.key.$error.unique" style="color: #ff0000;">Must be unique</div> 
 
      </td> 
 
      <td> 
 
      <button ng-click="delete($index)">Del</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </ng-form> 
 
    </div> 
 
    <button ng-click="add()">Add</button> 
 
</body> 
 

 
</html>

來源

2016-04-13 06:43:26

它的越野車的工作實施例; 1）類型測試... 2）添加行... 3）在第二行中輸入測試4）添加行5）編輯第一行到test1 6）第2行仍顯示錯誤 – FarazShuja

您沒有要求我進行深度測試你的代碼:-)你必須這樣做。我只回答你的基本問題。那麼，我已經更新了我的答案。請檢查一下。 –

thxxxxxxxxx !!!! – FarazShuja

如何驗證刪除行？

回答

相關問題