更改ng-class不更新样式？

问题描述：

帕格：

div(ng-class="('{{selectedMessageType}}' == 'incoming')?'messageTypeSelected':'messageTypeNotSelected'")

CSS：

.messageTypeSelected{ 
    background-color: #E8A83C; 
    color: #ffffff; 
} 

.messageTypeNotSelected{ 
    background-color: #E4E4E4; 
}

JS：

$scope.selectedMessageType = 'incoming'; 
$scope.changeMessageType = function(){ 
    ($scope.selectedMessageType == 'incoming')?$scope.selectedMessageType = 'outgoing':$scope.selectedMessageType = 'incoming'; 
};

我{{selectedMessageType}}与逻辑正确地更换。我也在浏览器上使用Inspector进行了检查。但是，当值更改时，不会应用样式。

我的代码有什么问题？

为纳克级的语法的对象格式。您必须指定类名作为键，并且该值应该是布尔表达式。 – Amit

答

您不需要ngClass指令中的{{}}。

你的代码更改为：

<div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'"></div>

一个工作code：

(function() { 
 
    angular 
 
    .module('app', []) 
 
    .controller('MainCtrl', MainCtrl); 
 

 
    MainCtrl.$inject = ['$scope']; 
 

 
    function MainCtrl($scope) { 
 
    $scope.selectedMessageType = 'incoming'; 
 
    
 
    $scope.changeMessageType = function() { 
 
     $scope.selectedMessageType = $scope.selectedMessageType == 'incoming' ? 'outgoing' : 'incoming'; 
 
    } 
 
    } 
 
})();

.messageTypeSelected { 
 
    background-color: #E8A83C; 
 
    color: #ffffff; 
 
} 
 

 
.messageTypeNotSelected { 
 
    background-color: #E4E4E4; 
 
}

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-class="selectedMessageType == 'incoming' ? 'messageTypeSelected' : 'messageTypeNotSelected'"> 
 
    <span ng-bind="selectedMessageType"></span> 
 
    </div> 
 
    <hr> 
 
    <button type="button" value="change" ng-click="changeMessageType()">Change class</button> 
 
</body> 
 

 
</html>

我建议你检查这tutorial

如果我不放入'{{}}'，'selectedMessageType'不会被替换为值。同时，我正在检查你的教程。 – Rendy

好吧，让我提供一个plunker来展示它是如何工作的。另外你在javascript中的声明应该是：'$ scope.selectedMessageType = $ scope.selectedMessageType =='incoming'？ 'outgoing'：'incoming';' – developer033

我的意思是它可以*在上面的评论。刚刚添加了一个工作代码。 – developer033

答

ngClass不会按照您编写它的方式工作。它发生在格式：

ng-class="{'css-class': trueOrFalseExpression}"

的trueOrFalseExpression可能是selectedMessageType == 'incoming'

更改ng-class不更新样式？

相关推荐