web-dev-qa-db-ja.com

AngularJSを使用してCSSクラスのプロパティを動的に変更する

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">

これは可能ですか？どうやって？

csstwitter-bootstrapangularjs
9
Romain

実際に、私は：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>

それが役に立てば幸いです。

1
Romain

私は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
14
Vince

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>
5
Denison Luz

私のために働く解決策を書きます：

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