md卡內容顏色變化

Question

<md-card class="md-padding" animate-on-change="currentCard" class="col-md-8" > 
<md-card-content> 
</md-card-content> 
</md-card> 

如何根據條件更改md-card或md-card-content的顏色？

我需要改變顏色，如果currentCard.redAlert= true

Answer 1

使用納克級的指令，

<md-card-content ng-class="{mystyleclass : currentCard.redAlert == true}"> 
</md-card-content> 


.mystyleclass{ 
    color: red; 
    /*css code here*/ 
} 

Answer 2

下面是做這件事的一種方式 - CodePen

標記

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <md-card class="md-padding" animate-on-change="currentCard" class="col-md-8" style="background:{{currentCard.redAlert?'red':'blue'}}" > 
    <md-card-content> 
    </md-card-content> 
    </md-card> 
    <md-button class="md-raised md-primary" ng-click="toggle()">Toggle</md-button> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages']) 

.controller('AppCtrl', function($scope) { 
    $scope.currentCard = { 
    redAlert: true 
    }; 
    $scope.toggle = function() { 
    $scope.currentCard.redAlert = !$scope.currentCard.redAlert; 
    } 
});