Using ng-class in AngularJS not working

Question

I have a form where the credit card type is detected when typed.

The type of card is in the field "paymentForm.cardNumber.$ccEagerType" and I can show it using:

{{paymentForm.cardNumber.$ccEagerType|lowercase}}  --> 'visa', 'maastercard'....

if I use ng-class="'visa'" in my form all works well.

But I ´d like to use

ng-class="'{{paymentForm.cardNumber.$ccEagerType|lowercase}}'"

and this is not working.

What am I doing wrong?

<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="'visa'" 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>

//css

.visa {
          background-image: url('....
}
.mastercard{
          background-image: url('....
}

try removing the single quotes from ng-class so that you have ng-class="{{paymentForm.cardNumber.$ccEagerType|lowercase}}" — Dimitrios Matanis
– Dimitrios Matanis, Commented Jan 26, 2018 at 14:26

Mathew Berg · Accepted Answer · 2018-01-26 15:00:09Z

2

You don't need ng-class for this, just output into class directly:

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

ng-class is useful if you have something like this:

<div
    ng-class="{
        'even': $even && someOtherConditions,
        'odd': $odd && someOtherConditions
    }">
    ...
</div>

answered Jan 26, 2018 at 15:00

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KungWaz · Accepted Answer · 2018-01-26 14:55:08Z

You can do it in two different ways.

Either as a predefined string with a statement:

<div ng-class="{'green': class === 'green', 'red': class === 'red'}">class: {{class}}</div>

Or you use the scope prop directly:

<div ng-class="class">class: {{class}}</div>

function TestCtrl($scope) {
  $scope.class = 'red';

  $scope.switch = function() {
    if($scope.class === 'green') {
    	$scope.class = 'red';
    } else {
    	$scope.class = 'green';
    }	
  };
}

.green {
  color: green;
}
.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TestCtrl">
    <div ng-class="{'green': class === 'green', 'red': class === 'red'}">class: {{class}}</div>
    <div ng-class="class">class: {{class}}</div>
    <button ng-click="switch()">Switch</button>
  </div>
</div>

Collectives™ on Stack Overflow

Using ng-class in AngularJS not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related