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>

然后，表格中的任何输入都将动态（并自动）验证和设置样式。那有意义吗？你必须修改上面的例子，但希望它指出你正确的方向。

有没有办法在给出一个$$ hashKey的情况下获取DOM对象？

1 个答案: