Question

我喜欢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中更改内容：在动态之后这样：

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

这可能吗？怎么样？

Answer 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

Answer 2

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

请参阅下面的代码或此插件（http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview）

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

请注意，虽然所有项目都有一个名为original且带有红色背景的类，但该值会使用阵列中的新颜色进行更新（覆盖）。

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

答案是“ 是＆amp;否 ”。

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

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

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

已经说过，我相信您可以使用此解决方案（https://stackoverflow.com/a/16507264/1310945）设法解决这个问题。

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

另一方面，也许有一个更好的解决方案（以及更多AngularJs风格方法），用于{I} {}的尝试。

无论如何希望这至少会让你朝着正确的方向前进。：）

ng-class

Answer 3

实际上我找到了一个不涉及的解决方案：之后（我在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>

我希望有所帮助。

Answer 4

我写的解决方案对我有用：

Html Page

      <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;
    }

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

4 个答案: