Question

这是我创建条件ng-class

的HTML输入标记

<input type="text" class="form-control" placeholder="label" name="label"
     ng-required="true"  ng-class="{ missing: $ctrl.flag=='true'}"
     ng-model="$ctrl.DataToSend.label[$ctrl.language]" />

这是我的CSS

.missing {border: solid 1px red;}

当我的$ ctrl.flag为真时，应该应用ng-class但它没有发生。为什么呢？

Answer 1

您必须将要应用的类放在引号中。否则，它会查找一个AngularJS变量，其中包含类名的字符串。

同时确保您的情况并非总是错误。在您的情况下，$ctrl.flag变量可能存储一个布尔值。因此，请将您的条件更改为：$ctrl.flag

更新代码：

 <input type="text" class="form-control" placeholder="label" name = "label" ng-required="true"  ng-class="{ 'missing': $ctrl.flag }" ng-model = "$ctrl.DataToSend.label[$ctrl.language]"/>

Answer 2

您可以尝试使用此代码段。

Jsfiddle link

段：

var app = angular.module('myApp', []);

app.controller('ctrl', function($scope) {
  $scope.flag = true;
  $scope.toggleClass = function() {
    $scope.flag = !$scope.flag;
  };
});

.missing {border: solid 1px red;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='ctrl'>
    {{flag}}
    <input type='text' class='form-control' ng-model='test' ng-class="{'missing': flag}" />
    <button ng-click='toggleClass()'>
      Change
    </button>
  </div>
</div>

这将有效

为什么ng-class没有应用于输入标签？

2 个答案: