CODEWITHSUNDEEP
cssangularjs
Laura M
Laura M

Reputation: 343

Convert underscores to hyphens in angular variable

I have data icons whose classes are formatted by vehicle type and then sub-type, like so:

.di-icon-type-car-full-size-car
.di-icon-type-car-mid-size-car
.di-icon-type-van-large-van
.di-icon-type-van-minivan

In my view I am trying to dynamically set the class based on the current vehicle's information: 

span(ng-class="'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type")

The problem is, my vehicle.sub_type variable is formatted with underscores, not dashes. So the class appears as di-icon-type-car-full_size_car instead of di-icon-type-car-full-size-car, for example. Is there a way I can convert all underscores in my vehicle.sub_type variable to hyphens before using it?

Upvotes: 1

Views: 840

Answers (2)

SixteenStudio
SixteenStudio

Reputation: 1026

span(ng-class="'di-icon-type-' + vehicle.type.replace(/_/g, "-") + '-' + vehicle.sub_type")

should work for you

Upvotes: 0

runTarm
runTarm

Reputation: 11547

I would suggest to move a string concatenation and dash normalization into a function in a controller like this:

$scope.getIconClass = function(vehicle) {
  var className = 'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type;
  return className.replace(/_/g, '-');
};

Then use it like this in the template:

<span ng-class="getIconClass(vehicle)"></span>

Alternatively, you could write a custom filter to do the job:

.filter('kebabcase', function() {
  return function (value) {
    return value && value.replace(/_/g, '-');
  };
});

Then use it like this:

<span ng-class="'di-icon-type-' + vehicle.type + '-' + vehicle.sub_type | kebabcase"></span>

Example Plunker: http://plnkr.co/edit/dRj6Sf3NeUq8IxnBshyE?p=preview

Upvotes: 2

Related Questions