Question

我有数据图标，其类按车辆类型格式化，然后是子类型，如下所示：

.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

在我看来，我试图根据当前车辆的信息动态设置课程：

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

问题是，我的vehicle.sub_type变量的格式是下划线，而不是短划线。因此，该类显示为di-icon-type-car-full_size_car，而不是di-icon-type-car-full-size-car。有没有办法在使用之前将vehicle.sub_type变量中的所有下划线转换为连字符？

Answer 1

我建议将字符串连接和短划线规范化移动到控制器中的函数中，如下所示：

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

然后在模板中使用它：

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

或者，您可以编写自定义过滤器来完成这项工作：

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

然后像这样使用它：

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

示例Plunker： http://plnkr.co/edit/dRj6Sf3NeUq8IxnBshyE?p=preview

Answer 2

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

应该适合你

将下划线转换为角度变量中的连字符

2 个答案: