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页面 - ＆gt;

 <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更改每张卡的颜色

3 个答案: