爲什麼ng-class沒有被應用到輸入標籤？

這裏是我創造了條件納克級的我的HTML input標籤爲什麼ng-class沒有被應用到輸入標籤？

<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是真正納克級應該得到應用但沒有發生。爲什麼？

來源

2017-08-11 Vishal Arthamwar

給我們的工作在小提琴片段或codepen。!! – Prabhakaran

謝謝Prabhakaran的回覆我是新來的StackOverflow可以請你告訴我如何添加小提琴或codepen –

您必須將要應用的類放在引號中。否則，它會查找包含類名字符串的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]"/>

來源

2017-08-11 06:58:21

謝謝西蒙，但我已經嘗試過，並沒有工作:( –

@VishalArthamwar然後propably你的條件總是假的。變量'$ ctrl.flag'包含一個布爾值？然後將條件更改爲：'$ ctrl.flag === true' –

@Simon根據您的評論我已經嘗試過這也但沒有任何影響GUI –

你可以試試這個片斷。

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>

這將工作

來源

2017-08-11 07:07:03

謝謝Jayant，但要求是，標誌是在控制器中自動改變，基於一些處理，而不是明確的按鈕點擊。我們可以做到這一點，沒有按鈕點擊 –

@VishalArthamwar是的，我們可以做到https://jsfiddle.net/knyojb9e/ 1/ –

它會工作@VishalArthamwar ...改變你的條件標誌值的範圍，但仍然想辦法使用$ ctrl作爲解釋在angularjs doumentaion – Prabhakaran

我發現了問題，我的代碼存在被重寫我的「缺少一些其它CSS 'CSS改變重寫CSS時，它開始工作正常。

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

以前它是

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

來源

2017-08-11 13:03:31

爲什麼ng-class沒有被應用到輸入標籤？

回答

相關問題