为什么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没有被应用到输入标签？

回答

相关问题