javascript - 使用 angularjs ng-class 更改每张卡片的颜色

Question

我在我的元素中使用这个示例来更改特定数据的颜色以响应我在 ng-repeat 中使用的响应。但是我有一个错误.. Conditionally change color of angularjs element?

我遇到的错误是

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

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

我不知道该怎么做才能结束这个错误，你能不能建议一些解释或一些例子，如何通过使用一些元素来改变每张卡片数据的特定颜色......提前谢谢大家..

Answer 1

您不需要使用 {{}}与您的字符串进行比较。只是比较没有 {{}} .只需使用 s.svStatus而不是 {{s.svStatus}}

喜欢:

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

或

你可以通过'{{s.svStatus}}'试试而不是 {{s.svStatus}}表示使用 {{}}在单引号中 ('')所以使用 '{{}}'

喜欢:

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