angularJS 根据数据值创建 css 友好的 class 名称

Question

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

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

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

例如电子游戏 > class="video-games"

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

提前感谢您的帮助。

Answer 1

是的，你可以做到。

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

Answer 2

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

我假设你的结果集是，

  $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

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

angularJS 根据数据值创建 css 友好的 class 名称

angularJS create css friendly class name from data value

angularjs

ng-repeat