9

我喜欢 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中的内容，如下所示：

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

这有可能吗？如何？

4

4 回答 4

14

我使用 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
于 2015-03-27T19:52:54.120 回答
5

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

请参阅下面的代码或此 plunk ( http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview )

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

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

所以现在你可能在想：“太棒了！如果我可以动态更改类颜色属性，我应该能够对任何其他属性做同样的事情，比如content对吗？！？ ”

答案是“是与否”。

似乎伪选择器喜欢:after并且:before被区别对待。

“虽然它们由浏览器通过 CSS 呈现，就好像它们就像其他真实的 DOM 元素一样，但伪元素本身并不是 DOM 的一部分，因此你不能直接使用 AngularJS、jQuery（或任何 JavaScript API）来选择和操作它们对于这个问题”

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

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

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

附带说明一下，对于您尝试使用ng-class.

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

<!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>
于 2013-09-20T19:23:48.783 回答
1

实际上我找到了一个不涉及 :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>

我希望这会有所帮助。

于 2013-09-23T12:09:51.517 回答
0

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

网页

      <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;
    }
于 2014-11-12T09:23:00.913 回答