0

我正在使用 AngularJS。我正在尝试向用户应用一些验证和反馈。设置的方式有点奇怪，所以诸如此类的东西ng-required似乎对它们所应用的文本区域没有影响（猜测是因为它们实际上不在 a 内<form>）。

border-color当其中一个字段未填写时，我正在尝试应用一个类将其更改为红色。在我的提交函数中，我正在检查一个标志。如果它没有验证为真，那么它在else块中运行它：

<div ng-repeat="keyWordForm in keyWordForm" class="fadeInBottom">
    {{keyWordForm.snippet}} <br>
    {{$scope.keywords}}
    <textarea style="{{keyWordForm.style}}" ng-required="'true'" class="{{keyWordForm.ourClass}} {{errorRequired}}" name="keyWordFormTextArea" ng-model="keyWordForm.data" ng-change="columnCount()"></textarea>

</div>

这应用了一个在我的 htmlerrorLine中使用的类：{{errorRequired}}

<textarea style="{{keyWordForm.style}}" class="{{keyWordForm.ourClass}} {{errorRequired}}" name="keyWordFormTextArea" ng-model="keyWordForm.data" ng-change="columnCount()"></textarea>

但这会将 CSS 应用于每个文本区域，而不仅仅是$pristine那些。我如何将 CSS 应用于尚未填写的字段？

我一直在尝试使用类似的东西：keywordFormTextArea.$pristine，但找不到有效的方法来使用它来实现我想要的效果。

想要的效果：

在此处输入图像描述

4

1 回答 1

0

我意识到我最大的问题{{errorRequired}}是本质上是一个全局变量。所以当我试图在undefinedtextareas 上设置它时，它会将它们设置在所有东西上。所以我改为将它添加为我的对象的键。

$scope.keyWordForm = [ {snippet : "输入关键字：(每个关键字单独一行)", style : "width:100%; height: 125px;", ourClass : "", keywordData : $scope.keyWord, errorRequired : $scope.errorRequired }
];

然后在我的循环中，我可以选择对象的当前索引并在那里设置未定义。

for(var i = 0; $scope.keyWordForm.length > i; i++){
    if(typeof $scope.keyWordForm[i].data == "undefined"){
        $scope.keyWordForm[i].errorRequired = "errorLine";
    }
}

在我的 HTML 中，我只需要访问该对象。

class="... {{keyWordForm.errorRequired}}

瞧！这实现了仅undefined应用 textareas 的 CSS 的能力。

于 2013-05-31T16:49:09.340 回答