1

我有一个<table>每行有几个input type="text". 我想验证输入是否为空，如果是，则向此输入字段添加一个 CSS 类，该类将显示错误。我得到的$scope只是$$hashKey，我知道这是标识ng-repeat列表元素的唯一值。

给定这个，我怎么能得到 DOM 对象$$hashKey？我正在使用开发人员工具进行挖掘，但没有找到。

4

1 回答 1

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

        }
    };
 });

如此处的文档中所述，该$setValidity函数将根据您提供的任何键自动为您添加一个类到元素中。在这种情况下，我们提供了一个 key ，'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>

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

于 2013-10-25T02:18:47.490 回答