ng-classが入力タグに適用されないのはなぜですか？

Question

は、ここで私は、条件NG-クラスを作成した上で、私のHTML入力タグである私の$ ctrl.flagが真のNG-クラスが適用されるはずですとき

<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;} 

ですしかしそれは起こっていない。どうして？

Answer 1

適用するクラスを引用符で囲む必要があります。それ以外の場合は、クラス名の文字列が含まれているAngularJS変数を探します。

また、条件が必ずfalseでないことを確認してください。あなたの場合、$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>

これは

Answer 3

に動作しますが、私は「行方不明に上書きされる他のいくつかのCSSがある私のコードで問題を見つけました'CSSはオーバーライドされたCSSを変更したときに正常に動作し始めました。

input[type="text"].missing {border: 1px solid #ff0000;} 

以前は、私たちにフィドルやcodepenで作業スニペットを与える

input[type="text"] {border: 1px solid #ddd;}