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">
これは可能ですか?どうやって?
実際に、私は: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>
それが役に立てば幸いです。
私は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
ng-style
を使用すると、AngularJSを使用してCSSクラスプロパティを動的に変更できます。
以下のコードまたはこのプランクを参照してください( http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview )
ng-repeat
で使用する色の配列を作成し、各項目のbackground-color
を動的に変更しました。
すべてのアイテムには赤い背景のoriginal
というクラスがありますが、その値は配列の新しい色で更新(オーバーライド)されます。
「Cool!クラスのcolorプロパティを動的に変更できる場合、content
のように他のプロパティでも同じことができるはずです。 ?!?」
答えは「はい&いいえ」です。
:after
や:before
のような疑似セレクターの扱いが異なるようです。
「他の実際のDOM要素のように、CSSを介してブラウザーによってレンダリングされますが、疑似要素自体はDOMの一部ではないため、AngularJS、jQuery(または任意のJavaScript API)で直接選択して操作することはできません。そのことについては"
あなたはこの投稿で完全な説明を見つけることができます:( https://stackoverflow.com/a/5041526/1310945 )
とは言っても、このソリューション( https://stackoverflow.com/a/16507264/1310945 )を使用すると、おそらくこれを回避することができます。
私はまだ試していませんが、楽しみのためだけに別の機会を作るかもしれません。
余談ですが、ng-class
を使用して実行しようとしていることには、より優れたソリューション(およびより多くのAngularJスタイルのアプローチ)があるかもしれません。
とにかく、これが少なくとも正しい方向にあなたを送ることを願っています。 :)
<!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>
私のために働く解決策を書きます:
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;
}