Search code examples
javascripthtmlangularjscssng-class

Changing Color for each card using angularjs ng-class

I have used this example in my project to change colors of specific data in response which i am using in ng-repeat. But i Got a error.. Conditionally change color of angularjs element?

The Error Which i am facing is 

Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=Backs&p1=is%20unexpected…%3D%3D'CallBacks'%2Ccard_media_followup%3ACall%20Backs%3D%3D'Followups'%7D
    at Error (native)
    at file:///android_asset/www/js/angular.min.js:6:416
    at Object.s.throwError (file:///android_asset/www/js/angular.min.js:210:32)
    at Object.s.consume (file:///android_asset/www/js/angular.min.js:210:207)
    at Object.s.object (file:///android_asset/www/js/angular.min.js:209:448)
    at Object.s.primary (file:///android_asset/www/js/angular.min.js:206:335)
    at Object.s.unary (file:///android_asset/www/js/angular.min.js:206:174)
    at Object.s.multiplicative (file:///android_asset/www/js/angular.min.js:205:434)
    at Object.s.additive (file:///android_asset/www/js/angular.min.js:205:261)
    at Object.s.relational (file:///android_asset/www/js/angular.min.js:205:96) <md-card-title-media ng-class="{card_media_prosp:{{s.svStatus}}=='Prospective',card_media_na:{{s.svStatus}}=='NotInterested',
  card_media_closed:{{s.svStatus}}=='Closed',card_media_callback:{{s.svStatus}}=='CallBacks',card_media_followup:{{s.svStatus}}=='Followups'}">(anonymous function) @ angular.min.js:107
2angular.min.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.8/$parse/syntax?p0=Interested&p1=is%20unexp…3D'CallBacks'%2Ccard_media_followup%3ANot%20Interested%3D%3D'Followups'%7D
    at Error (native)
    at file:///android_asset/www/js/angular.min.js:6:416
    at Object.s.throwError (file:///android_asset/www/js/angular.min.js:210:32)
    at Object.s.consume (file:///android_asset/www/js/angular.min.js:210:207)
    at Object.s.object (file:///android_asset/www/js/angular.min.js:209:448)
    at Object.s.primary (file:///android_asset/www/js/angular.min.js:206:335)
    at Object.s.unary (file:///android_asset/www/js/angular.min.js:206:174)
    at Object.s.multiplicative (file:///android_asset/www/js/angular.min.js:205:434)
    at Object.s.additive (file:///android_asset/www/js/angular.min.js:205:261)
    at Object.s.relational (file:///android_asset/www/js/angular.min.js:205:96) <md-card-title-media ng-class="{card_media_prosp:{{s.svStatus}}=='Prospective',card_media_na:{{s.svStatus}}=='NotInterested',
  card_media_closed:{{s.svStatus}}=='Closed',card_media_callback:{{s.svStatus}}=='CallBacks',card_media_followup:{{s.svStatus}}=='Followups'}">(anonymous function) @ angular.min.js:107

The error is 


Syntax Error: Token 'Backs' is unexpected, expecting [}] at column 24 of the expression [{card_media_prosp:Call Backs=='Prospective',card_media_na:Call Backs=='NotInterested',
  card_media_closed:Call Backs=='Closed',card_media_callback:Call Backs=='CallBacks',card_media_followup:Call Backs=='Followups'}] starting at [Backs=='Prospective',card_media_na:Call Backs=='NotInterested',
  card_media_closed:Call Backs=='Closed',card_media_callback:Call Backs=='CallBacks',card_media_followup:Call Backs=='Followups'}].

HTML Page-> 

 <md-card class="md-primary" style="background-color:#FBC02D;">
             <md-card-title style="padding:0px 0px 0px 0px !important">
      <md-card-title-media ng-class="{card_media_prosp:      {{s.svStatus}}=='Prospective',card_media_na:{{s.svStatus}}=='Not Interested',
  card_media_closed:{{s.svStatus}}=='Closed',card_media_callback:{{s.svStatus}}=='Call Backs',card_media_followup:{{s.svStatus}}=='Followups'}">
    <div class="card_status">{{s.svStatus | limitTo:1 }}</div>
  </md-card-title-media>

    <md-card-title-text class="card_content">
      <span class="md-subhead" style="font-weight:bold">{{s.svID}} {{s.svCompanyName}}</span>
      <span class="md-subhead">POC: {{s.svOwnName}}</span>
      <span class="md-subhead">Phone: {{s.svContactNo}}</span>
    </md-card-title-text>

             </md-card-title>
           </md-card>

.card_media_prosp {
  background-color: #00e6ac;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
.card-media_new {
  background-color: #00e6ac;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
.card_media_callback {
  background-color:#4d4dff ;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
.card_media_followup {
  background-color: #cc8400;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
.card_media_na {
  background-color:#fd2d2c;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
.card_media_closed {
  background-color: #a6a6a6;
      font-size: 1.2em;
      width: 15%;
      margin-top: 0px;
}
 .card_status{
  margin-top: 25%;
  margin-left: 25%;
   font-size: 2em;
 }

I don't know exactly what to do to finish this error, can you please suggest some explanation or some example how to change specific colors for each card data by using some item in response... Thanks in advance guys..

Solution

  • You do not need to use {{}} to compare with your string. just compare without {{}}. just use s.svStatus instead of {{s.svStatus}}

    like:

    ng-class="{card_media_prosp:s.svStatus=='Prospective',card_media_na:s.svStatus=='Not Interested' ....}"

    or

    you can try by '{{s.svStatus}}' instead of {{s.svStatus}} means use {{}} in single quotation ('') so use '{{}}'

    like:

    ng-class="{card_media_prosp:'{{s.svStatus}}'=='Prospective',card_media_na:'{{s.svStatus}}'=='Not Interested' ....}"