Question

如何区分Angular JS中的可选字段，必需的无效字段和必需的有效字段？

要求是在白色背景中有可选字段，黄色背景中需要无效字段，红色边框，黄色背景中有必要的有效字段，没有红色边框。

在我的页面中，动态设置ng-required。即使设置为false; angular添加了类＆＃34; ng-valid-required＆＃34;。根本没有办法区分。任何帮助将受到高度赞赏。

<select class="form-control" ng-model="vm.Category" ng-required="vm.IsCategoryRequired">
    <option ng-repeat="option in vm.CategoryOptions" value="{{option.id}}">{{option.label}}</option>
</select>`

CSS：

select.ng-required {
    background-color: #fdfddf;
}
select.ng-valid-required{
    background-color: #fdfddf;
}
select.ng-invalid {
    box-shadow: 0px 0px 4px 2px rgba(227,43,43,1);
    background-color: #fdfddf;
}

问题是angular puts class ng-valid-required，即使vm.IsCategoryRequired = false。仅当缺少ng-required属性时，才会缺少ng-valid-required。

Answer 1

由于您还没有提供任何代码，我假设您的某个输入字段看起来像这样

<input ng-modal="myModal" ng-required="a===b" />

此处a===b是条件（让我们说）

现在一种方法是在ng-style中指定一个条件来设置背景颜色和边框。

<input ng-modal="myModal" ng-required="a===b" 
       ng-style="a===b ? { 'background-color':'yellow', 'border': '1px solid red' } : { 'background-color':'yellow', 'border': '1px solid black' }"/>

如何区分可选字段，必需的无效字段和必需的有效字段？

1 个答案: