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

试试这个：

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

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

Answer 2

ng-class 语法应该如下所示，您不必插入 {{}} 范围的表达式

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

参考：https://docs.angularjs.org/api/ng/directive/ngClass

Answer 3

您不需要使用 {{}} 来与您的字符串进行比较。只比较没有 {{}}。只需使用 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' ....}"

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

Changing Color for each card using angularjs ng-class

html

javascript

css

angularjs

ng-class