具有多个条件表达式和多个样式属性的Angular ng-style

Question

我想为使用ng-style条件的手风琴组添加多个风格属性,因为ng-class它不适用于手风琴.

以下是我的尝试方式:

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none' }"

这工作正常.但也想加border-color.

我试过这个:

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', border-color: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid  ? 'red' : 'none'}"

但它给了我解析错误.

我也试过这个,但同样的解析错误:

ng-style="ivrMessageForm.ivr_messagetitle.$error.required ? {border:'3px solid', border-color: 'red'} : {border:'none', border-color: 'none'}"

任何人都可以帮助我如何使用ng-style添加具有多个条件的多个样式属性.

Answer 1

你应该在'border-color'中添加单引号

ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid ? '2px solid' : 'none', 'border-color': ivrMessageForm.ivr_messagetitle.$error.required && !isFormValid  ? 'red' : 'none'}"