Question

<div ng-if="question.type =='options'" ng-repeat="option in question.options" >
   <ion-radio name="{{$parent.question.id}}" 
       ng-model="$parent.question.answer" 
       required ng-value="option.id"  
       ng-class="{'has-custom-error':submitted && questionForm.{{$parent.question.id}}.$invalid,
       'has-custom-success':questionForm.{{$parent.question.id}}.$valid }" 
    >
       {{option.text}}
    </ion-radio>
</div>

我必须在用户提交表单时添加has-custom-error而不选择该选项。这是表单无效但ng-class未被评估。

演示代码在此处：http://plnkr.co/edit/FwjoCTYONvi3BoFHNKFK?p=preview

Answer 1

您的代码至少存在一个问题。您不能在ng-class属性中使用插值{{}}。这是正确的语法：

ng-class="{'has-custom-error':submitted && questionForm[$parent.question.id].$invalid, 'has-custom-success':questionForm[$parent.question.id].$valid }"

Answer 2

我不认为可以在ng-class表达式上使用{{}}表达式。您应该可以像使用这个questionForm [$ parent.question.id]

一样使用它

此外，我从来没有让类使用类 - 在部分之间，只有CamelCase像hasCustomError。所以{hasCustomError：questionForm。$ invalid}应该可以工作。

您是否考虑过使用已经由angular用于样式的styleClass ng-invalid-required？它通常更清晰，因为不需要所有ng-class表达式

Answer 3

当你在Angular表达式中时，你不需要胡子括号。所以你的代码应该是：

<div ng-if="question.type =='options'" ng-repeat="option in question.options">
   <ion-radio name="{{$parent.question.id}}" 
              ng-model="$parent.question.answer" 
             required ng-value="option.id"  
             ng-class="{'has-custom-error':submitted && questionForm[$parent.question.id].$invalid,
'has-custom-success':questionForm[$parent.question.id].$valid }">
       {{option.text}}
    </ion-radio>
</div>

变量形式a.b已被索引器替换为[“b”]，以便正确评估它。

Answer 4

您不能在表达式中使用双重表达式（{{ ... }}）。 ng-class值已经是object类型的表达式，因此您应该在此属性中使用JavaScript语法：

ng-class="{'has-custom-error': submitted && questionForm[$parent.question.id].$invalid,
           'has-custom-success': questionForm[$parent.question.id].$valid }"

使用$parent也是必要的。顺便说一句，你没有将它用于你的ng-repeat表达式：

ng-repeat="option in question.options"

所以你应该简单地使用question而不是$parent.question：ng-repeat块的范围从其父范围继承，因此可以通过继承获得问题。

请注意，使用你的plunkr，你正在使用的离子无线电指令似乎没有正确设置它生成的输入的name属性。这可能就是CSS类没有出现的原因。

Answer 5

ng-form是我问题的解决方案。但我面临的问题是我的ion-radio指令的name属性。对于无线电，因此我使用了角ng-invalid-required。对于其他html标签，我使用了ng-form.$invalid

ng-class没有得到评估

5 个答案: