AngularJS -如何重构CSS代码样式

Question

我有一个像这样的角函数:

$scope.colorValidator = function () {
    $scope.token_style = "";
    $scope.expdate_style = "";
    if (!$scope.$$childHead.billingblock.accountID.$valid) {
        $scope.token_style = {border: "1px solid #ff0000"}
    }
    if (!$scope.$$childHead.billingblock.expDate.$valid) {
        $scope.expdate_style = {border: "1px solid #ff0000"}
    }
};

我如何设置{border: "1px solid #ff0000"}在一个常数变量(可能像红色)，并设置它在每个验证?

编辑:我为每个输入设置ng-style(在视图中)。

Answer 1

你不需要那样做。

检查你的标记当字段无效，他们有ng-dirty和ng-invalid类应用

使用它们来设置控件的样式

.my-special-form .ng-invalid {
    border: 1px solid #ff0000
}

Answer 2

请看这里:http://jsbin.com/hekaz/3/edit?css,output

ie:

input.ng-invalid[ng-model="username"] {
  border: 5px solid red;
}
input.ng-valid[ng-model="username"] {
  border: 5px solid green;
}

Answer 3

我给它设置了一个变量:

var redColor = {border: "1px solid #ff0000"};
if (!$scope.$$childHead.billingblock.accountID.$valid) {
     $scope.token_style = redColor;
}

感谢大家的回答。