有沒有一種方法可以獲得給定$$ hashKey的DOM對象？

Question

我有一個<table>其中每行有幾個input type="text"。我想驗證輸入是否爲空，如果是，則將CSS類添加到此輸入字段，該字段將顯示錯誤。我在$scope中得到的全部是$$hashKey，我知道這是識別ng-repeat列表元素的唯一值。

我怎麼能得到這個$$hashKey？DOM對象？我正在使用開發工具進行挖掘，但我沒有找到它。

Answer 1

而不是試圖從你的控制器（或服務）操縱DOM（即查找和元素和添加/刪除類），你應該從一個指令。

寫指令，將做驗證你：

.directive('validateField', function(){ 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ngModel){ 

      scope.$watch(attrs.ngModel, function(newVal, oldVal){ 
       var isValid = false; 
       // do some validation checking on newVal here 
       ngModel.$setValidity('tableInput', isValid); 
      }); 

     } 
    }; 
}); 

如文檔here指出，該$setValidity功能會自動添加一個類的元素對你來說，根據你提供力所能及的關鍵。在這種情況下，我們提供了'tableInput'的密鑰，因此它將在模型無效時添加ng-invalid-table-input類，並在模型有效時添加一類ng-valid-table-input。

在你的CSS

所以，你現在要做的就是創建一個規則有一些特殊的風格：

input.ng-invalid-table-input{ 
    /* special styles go here */ 
} 
input.ng-valid-table-input{ 
    /* special styles go here */ 
} 

然後你可以使用這個在你看來是這樣的：

<table> 
    <tr ng-repeat="things in listOfThings"> 
     <td ng-repeat="thing in things"> 
      <input type="text" ng-model="someValue" validate-field /> 
     </td> 
    </tr> 
</table> 

然後，表中的任何輸入都將被動態（並自動）驗證並設置樣式。那有意義嗎？你必須修改上面的例子，但希望它指出你在正確的方向。