web-dev-qa-db-fra.com

Changer dynamiquement les propriétés d'une classe css avec AngularJS

J'aime la façon dont les exemples de bootstrap ont l'air

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

Mais je dois changer le contenu dans le .bs-docs-example: après dynamiquement.

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

Est-ce que c'est possible? Comment?

csstwitter-bootstrapangularjs
9
Romain

En fait, j'ai trouvé une solution qui n'implique pas: après (je suis tellement mauvais en CSS que je n'y ai pas pensé plus tôt ...) .__, j'ai aussi appris un peu en CSS. Voici :

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

et l'utiliser comme ça:

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

J'espère que ça aide.

1
Romain

J'ai fait quelque chose de similaire en utilisant ng-bind-html, je manquais de contrôle sur le contenu, donc je modifie une classe qui le gérera par la suite.

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

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

Ensuite, vous obtiendrez quelque chose comme ça

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

EDIT: Vous pouvez également gérer le problème ci-dessus via css attr () qui extraira l'attribut dans le contenu

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

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

Vous verrez quelque chose comme:

this is - Value 123
this be - Value 456
14
Vince

Vous pouvez utiliser ng-style pour modifier dynamiquement une propriété de classe CSS à l'aide de AngularJS.

Voir le code ci-dessous ou ce code ( http://plnkr.co/edit/n4NlIfgfXiiNHWu5oTzS?p=preview )

J'ai créé un tableau de couleurs à utiliser par le ng-repeat et modifié le background-color de chaque élément de manière dynamique.

Notez que bien que tous les éléments aient une classe appelée original avec un arrière-plan rouge, cette valeur est mise à jour (substitution) avec une nouvelle couleur du tableau.

Alors maintenant, vous pensez probablement: "Cool! Si je peux changer dynamiquement la propriété de couleur de classe, je devrais pouvoir faire la même chose avec n'importe quelle autre propriété, comme la variable content, non?!?"

La réponse est "Oui et Non".

Il semble que les pseudo-sélecteurs tels que :after et :before soient traités différemment.

"Bien qu'ils soient rendus par les navigateurs via CSS comme s'ils étaient Comme d'autres éléments réels du DOM, les pseudo-éléments eux-mêmes ne font pas partie Du DOM et vous ne pouvez donc pas les sélectionner et les manipuler directement avec AngularJS, jQuery (ou n'importe quelle API JavaScript, d'ailleurs "

Vous trouverez une explication complète sur ce message: ( https://stackoverflow.com/a/5041526/1310945 )

Après avoir dit cela, je pense que vous pouvez probablement contourner ce problème en utilisant cette solution ( https://stackoverflow.com/a/16507264/1310945 ).

Je n'ai pas encore essayé - mais je pourrais faire une autre fois juste pour m'amuser.

En passant, il existe peut-être une meilleure solution (et davantage d’approche de style AngularJs) pour ce que vous essayez de faire avec ng-class.

En tout cas, espérons que cela vous envoie au moins dans la bonne direction. :)

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

j'écris la solution qui fonctionne pour moi:

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

Dans votre contrôleur de cette page 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