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

使用NG-クラスディレクティブ場合

<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; 
    } 
});