使用 AngularJS 动态更改 css 类的属性答案

【问题标题】：Dynamically change a css class' properties with AngularJS使用 AngularJS 动态更改 css 类的属性
【发布时间】：2013-09-25 22:35:44
【问题描述】：

我喜欢 bootstrap 示例的外观

<css>
.bs-docs-example {
  background-color: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 4px 4px 4px 4px;
  ...
}
.bs-docs-example:after {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Title";
  ...
}

但我需要动态更改 .bs-docs-example:after 中的 content 像这样：

<html>
<div class="bs-docs-example" ng-style="content:'{{ title }}';"
     ng-repeat="title in titles">

这可能吗？怎么样？

【问题讨论】：

您的 html 代码包含 angular js 标签。但是 :after 会有所不同。搜索 css :after 文档。
好的，:after 不是 dom 的一部分，但是有人找到了一种动态更改 CSS 的方法，它适用于所有：参见这个例子（之前和之后是完全一样的） jsfiddle.net/aKbmq

标签： css twitter-bootstrap angularjs

【解决方案1】：

我使用 ng-bind-html 做了类似的事情，我缺乏对内容的控制，所以我修改了一个稍后处理它的类

var somecolorvar = "#F00";
$scope.mystyles = ".something:after { color: " + somecolorvar + "; }";

<style ng-bind-html="mystyles"></style>

然后你会得到这样的东西

<style>.something:after { color: #F00; }</style>

编辑：您还可以通过 css attr() 处理上述问题，这会将属性拉入内容中

.something:after {
    display: inline;
    content: '- Value ' attr(value);
}

<div class="something" value="123">this is</div>
<div class="something" value="456">this be</div>

你会看到类似的东西：

this is - Value 123
this be - Value 456

【讨论】：

这正是我想要的！谢谢！
完美！这就是我一直在寻找的
别忘了使用 ngSanitize，因为没有它 ng-bind-html 就无法工作。

【解决方案2】：

您可以使用 ng-style 使用 AngularJS 动态更改 CSS 类属性。

查看下面的代码或这个 plunk (http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview)

我创建了一组颜色供ng-repeat 使用，并动态更改每个项目的background-color。

请注意，尽管所有项目都有一个名为 original 的类，其背景为红色，但该值会使用数组中的新颜色进行更新（覆盖）。

所以现在你可能在想：“酷！如果我可以动态更改类颜色属性，我应该能够对任何其他属性执行相同操作，例如 content 对吗？！？"

答案是“Yes & No”。

似乎:after 和:before 等伪选择器的处理方式不同。

“虽然它们是由浏览器通过 CSS 呈现的，就好像它们是像其他真实的 DOM 元素一样，伪元素本身不是一部分 DOM，因此您不能直接选择和操作它们使用 AngularJS、jQuery（或任何与此相关的 JavaScript API）

你可以在这篇文章中找到完整的解释：(https://stackoverflow.com/a/5041526/1310945)

话虽如此，我相信您可以使用此解决方案 (https://stackoverflow.com/a/16507264/1310945) 解决此问题。

我还没有尝试过 - 但我可能会再做一次，只是为了好玩。

附带说明，对于您尝试使用 ng-class 执行的操作，也许有更好的解决方案（以及更多 AngularJs 风格的方法）。

无论如何，希望这至少能让你朝着正确的方向前进。 :)

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
  <title>Document</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css">

  <style>
    ul {
      list-style-type: none;
      color: #fff;
    }

    li {
      padding: 10px;
      text-align: center;
    }

    .original {
      background-color: red;
    }
  </style>

  <script>

  var myApp = angular.module('myApp', []);


  myApp.controller("myAppCtrl", ["$scope", function($scope) {

      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];

      $scope.style = function(value) {
          return { "background-color": value };
      }

  }]);


  </script>

</head>
<body>

<div ng-controller="myAppCtrl">
  <div class="container">
    <div class="row">
      <div class="span12">
        <ul>
          <li ng-repeat="color in colors">
            <h4 class="original" ng-style="style(color)"> {{ color }}</h5>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

感谢您的回答，但我试图访问 :after 这不是 DOM 的一部分。在这种情况下，我搜索了一种更复杂的方法来做一些简单的事情。

【解决方案3】：

实际上我找到了一个不涉及 :after 的解决方案（我的 CSS 太糟糕了，我没有早点考虑过......）我也学了一点CSS。这里是：

<css>
.bs-docs-example {
   background-color: #FFFFFF;
   border: 1px solid #DDDDDD;
   border-radius: 4px 4px 4px 4px;
   ...
}
.bs-docs-example-title {
  background-color: #F5F5F5;
  border: 1px solid #DDDDDD;
  border-radius: 4px 0 4px 0;
  color: #9DA0A4;
  content: "Title";
  ...
}

并像这样使用它：

<html>
<div class="bs-docs-example" ng-repeat="title in titles">
<span class="bs-docs-example-title">{{ title }}</span>
</div>

我希望这会有所帮助。

【讨论】：

【解决方案4】：

我写了适合我的解决方案：

HTML 页面

      <div class="list-group">
        <a href ng-click="setSelectedLink('wiki')"      ng-class="{active:isSelectedLink('wiki')}"      class="list-group-item">Wiki</a>
        <a href ng-click="setSelectedLink('tacheList')" ng-class="{active:isSelectedLink('tacheList')}" class="list-group-item">Link</a>
      </div>

在这个 html 页面的控制器内部：JS

    $scope.tab = 'wiki';//by default the first is selected
    $scope.setSelectedLink = function (tabId) {
        $scope.tab = tabId;
        console.log("setTab: "+tabId);
        $location.path('/'+tabId);
    }
    $scope.isSelectedLink = function (tabId) {
        return $scope.tab === tabId;
    }

【讨论】：