StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
18924356
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2013-09-20T19:23:48.783
FavoriteCount
0
LastActivityDate
2013-09-20T19:23:48.783
LastEditDate
2017-05-23T12:01:39.980
LastEditorUserId
-1
OwnerUserId
1310945
ParentId
18918458
PostTypeId
2
Score
5
ViewCount
0
LastEditorDisplayName
text
Body
<p>You can use <code>ng-style</code> to dynamically change a CSS class property using AngularJS.</p> <p>See the code below or this plunk (<a href="http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/n4NlIfgfXIiNHWu5oTzS?p=preview</a>)</p> <p>I've created an array of colours to be used by the <code>ng-repeat</code> and change the <code>background-color</code> of each item dynamically.</p> <p>Note that although all the items have a class called <code>original</code> with red background, that value is updated (override) with a new colour from the array.</p> <p>So now you're probably thinking: "<em>Cool! If I can change the class color property dynamically I should be able to do the same with any other property, like the <code>content</code> one right ?!?</em>"</p> <p>The answer is "<strong><em>Yes & No</em></strong>".</p> <p>It seems pseudo selectors like <code>:after</code> and <code>:before</code> are treated differently.</p> <blockquote> <p>"Although they are rendered by browsers through CSS as if they were like other real DOM elements, pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with AngularJS, jQuery (or any JavaScript APIs for that matter"</p> </blockquote> <p>You can find a full explanation on this post: (<a href="https://stackoverflow.com/a/5041526/1310945">https://stackoverflow.com/a/5041526/1310945</a>)</p> <p>Have said that, I believe you can probably manage to work around this, using this solution (<a href="https://stackoverflow.com/a/16507264/1310945">https://stackoverflow.com/a/16507264/1310945</a>).</p> <p>I haven't tried yet - but I might do another time just for fun.</p> <p>On a side note, maybe there's a better solution ( and more AngularJs style approach) for what you're trying to do using <code>ng-class</code>.</p> <p>Anyway hope this at least send you on the right direction. :)</p> <pre><code><!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> </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. PODynamically change a css class' properties with AngularJS
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USCommunity
UserOwnerUserId
1. USDenison Luz
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COThanks for your answer but I was trying to access :after which isn't part of the DOM. In this case I have search a much more complicated way to do something simple.
  singulars
  PostPostId
  PO
  UserUserId
  USRomain

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.