更改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進行了檢查。但是，當值更改時，不會應用樣式。

我的代碼有什麼問題？

來源

2016-07-27 Rendy

爲納克級的語法的對象格式。您必須指定類名作爲鍵，並且該值應該是布爾表達式。 – 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

來源

2016-07-27 02:47:50 developer033

如果我不放入'{{}}'，'selectedMessageType'不會被替換爲值。同時，我正在檢查你的教程。 – Rendy

好吧，讓我提供一個plunker來展示它是如何工作的。另外你在javascript中的聲明應該是：'$ scope.selectedMessageType = $ scope.selectedMessageType =='incoming'？ 'outgoing'：'incoming';' – developer033

我的意思是它可以*在上面的評論。剛剛添加了一個工作代碼。 – developer033

ngClass不會按照您編寫它的方式工作。它發生在格式：

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

的trueOrFalseExpression可能是selectedMessageType == 'incoming'

來源

2016-07-27 02:47:59 mauris

更改ng-class不更新樣式？

回答

相關問題