CODEWITHSUNDEEP
javascripthtmlangularjscssng-class
Om Bala
Om Bala

Reputation: 169

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..

Upvotes: 1

Views: 1138

Answers (3)

Shaishab Roy
Shaishab Roy

Reputation: 16805

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' ....}"

Upvotes: 1

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

ng-class syntax should be as below, you don't have to interpolate {{}} the expressions of the scope

ng-class="{'class1' : expression1, 'class2':expression1 ... }"

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'}"

refer:https://docs.angularjs.org/api/ng/directive/ngClass

Upvotes: 1

yeouuu
yeouuu

Reputation: 1913

Try this:

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'}

Complete html:

<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>

Upvotes: 1

Related Questions