AngularJS中ng-class绑定信用卡类型样式失效问题排查

嘿，我懂你遇到的这个小坑！你在ng-class的用法上犯了一个AngularJS新手常踩的错误——ng-class本身就是用来绑定表达式/变量的，完全不需要用插值语法{{}}把它包起来。

问题出在哪？ #

• 当你写ng-class="'visa'"时，这是直接传递了一个字符串类名，AngularJS能正确识别并把visa类应用到输入框上，所以CSS样式生效了。
• 但你写成ng-class="'{{paymentForm.cardNumber.$ccEagerType|lowercase}}'"的时候，相当于把插值后的结果又用单引号包裹成了一个字符串字面量。AngularJS会把整个'visa'（包含单引号）当成类名去匹配，而你的CSS里定义的是.visa，自然就找不到对应的样式了！

正确的写法 #

直接把表达式传给ng-class就行，不需要多余的单引号和插值语法：

<form class="form-horizontal" role="form" name="paymentForm" novalidate>
  <div class="form-group">
    <label class="col-sm-3 control-label" for="card-number">Card</label>
    <div class="col-sm-6">
      <input type="text" class="form-control input-lg" 
             ng-class="paymentForm.cardNumber.$ccEagerType|lowercase" 
             ng-model="card.number" cc-number cc-eager-type 
             name="cardNumber" ui-credit-card-mask id="cardNumber" 
             placeholder="Cartao Visa, Mastercard e Discover">
    </div>
  </div>
</form>

扩展：如果需要混合固定类和动态类 #

要是你还想同时保留固定类（比如form-control input-lg），可以用数组语法：

<input type="text" 
       ng-class="['form-control input-lg', paymentForm.cardNumber.$ccEagerType|lowercase]" 
       ng-model="card.number" cc-number cc-eager-type 
       name="cardNumber" ui-credit-card-mask id="cardNumber" 
       placeholder="Cartao Visa, Mastercard e Discover">

或者用对象语法（适合需要条件判断类名的场景）：

<input type="text" 
       ng-class="{
         'form-control input-lg': true,
         [paymentForm.cardNumber.$ccEagerType|lowercase]: true
       }" 
       ng-model="card.number" cc-number cc-eager-type 
       name="cardNumber" ui-credit-card-mask id="cardNumber" 
       placeholder="Cartao Visa, Mastercard e Discover">

小提示 #

记住：ng-class是AngularJS的指令，它会自行解析内部的表达式，不需要额外用插值语法。插值语法{{}}更多是用在普通HTML属性（比如title="{{cardType}}"）或者页面文本内容里。

内容的提问来源于stack exchange，提问作者Luiz Alves