Question

我需要将数据值转换为友好的css类名。

我的类别标题以{{catTitle}}的形式访问，但我还想将背景图像应用于包含标题的div。

我有一系列css类来处理图像，这些类符合命名约定“category-title”

e.g。视频游戏＆gt;类= “视频游戏”

我可以将数据值处理为小写，并用连字符替换空格和符号（例如'或/）吗？然后使用（我想）ng-class将其应用于div。

提前感谢您的帮助。

Answer 1

根据我的理解，我提供了这个解决方案。

我假设你的结果集是，

  $scope.categoryDetails = [{
    "categoryId": "001",
    "categoryTitle": "Video Games",
    "categoryTypeId": "1"
  }, {
    "categoryId": "003",
    "categoryTitle": "Tester'Data",
    "categoryTypeId": "2"
  }, {
    "categoryId": "005",
    "categoryTitle": "Master/Slave",
    "categoryTypeId": "3"
  }];

我将其转换为小写，并用-连字符替换可能的方案。

$scope.getCategoryTitleClassName = function(catTitle) {
    var returnTitle = '';
    returnTitle = catTitle.toLowerCase().replace(" ", "-").replace("'", "-").replace("/", "-");
    return returnTitle;
};

在html中

<table>
  <thead>
    <tr>
      <th>File Name</th>
      <th>|</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="category in categoryDetails">
      <td><span ng-bind="category.categoryTitle"></span>
      </td>
      <td>|</td>
      <td ng-class=getCategoryTitleClassName(category.categoryTitle)>
        <span>{{getCategoryTitleClassName(category.categoryTitle)}}</span>
      </td>
    </tr>
  </tbody>
</table>

<强> CSS

.video-games{
  background-color: red;
}

.tester-data {
   background-color: orange;
}

.master-slave {
  background-color: yellow;
}

样本plunker：http://plnkr.co/edit/GUqm9I6wXTvBsVU2nNun?p=preview

如果我的假设有误，请分享更多信息。

Answer 2

是的，你可以做到。

<div ng-class="catTitle.toLowerCase().replace(/\s/g, '-')"></div>

angularJS从数据值创建css友好类名

2 个答案: