I am designing a dynamic hr (horizonatal) rule.
In my Style sheet
hr.my-hr:after{
content:'Generic'
}
In my template
<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">
But how do i dynamically change the content in the template when using ng-repeat ????
All ng-style does is add inline styles. However you want to add a psuedo element ::after. According to the MDN:
You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
So inferred from that you can't use them inline, which sadly means ng-style can't do what your after.
However if your ::after is defined in a stylesheet you can use ng-class to dynamically add that style.
So
<hr ng-class="{'my-hr': <some condition to evaluate>}" />
Most cases that will suffice. However it looks like to want to dynamically set the content of ::after. So for that i can only imagine two options.
If you just want to simply add the string value use databinding
<hr />
{{name}}
However if you want extra styling on that string create a small directive as a re-usable widget may be the better option.
Related
I want to edit HTML&CSS code to arrange it differently on the page depending if a condition is met or not using AngularJS (ng commands)
I have thisYear=true or false
If thisYear is true I want the labels and input HTML tags from the page to be arrange in a certain way using inLine css if the year is false I want to arrange it in a different way.
How can I set up an if/else statement in AngularJS (ngIf) and edit the html and CSS inLine?
You need to add something like this in your view:
<div ng-if="thisYear">
<!-- Displays stuff when thisYear is true -->
</div>
<div ng-if="!thisYear">
<!-- Displays stuff when thisYear is false -->
</div>
Also, add the css classes to particular div for styling.
It looks as though there are multiple things that you may be asking for. I think you could benefit from using the ng-style and ng-class directives as well as the ng-if directive.
Using ng-if will allow you to load a div into the DOM based upon whether or not the boolean value is true or false. With this, you can easily arrange your labels in whatever position you'd like.
<div ng-if="inputTrue">
<!-- your input/labels go here and will be loaded into the DOM -->
</div>
<div ng-if="!inputTrue">
<!-- this input will not be loaded into the DOM -->
</div>
In addition to this, you can also take advantage of the ng-class and ng-style directives. Using ng-class will allow you to add a class to the div based on a condition that evaluates to true or false. The same thing goes for the ng-style directive.
It would follow something along the lines of ng-class="{'className':inputTrue}".
I'm trying to do a toggleClass onClick in AngularJs 1.5. Is there any possibility to do that? For example, if you click on a div it'll change a background color.
You can use ng-class which is made for this very purpose.
ng-class is used like <div ng-class={'class_you_want_to_apply': some_boolean_variable}></div>
If you want to add more classes you can do so by added commas after each 'some_boolean_variable'
More docs at:
https://docs.angularjs.org/api/ng/directive/ngClass
I'm using md-datepicker in my page. I have a requirement wherein I need to add a CSS class to the rendered input element. Is there a way to modify the markup generated by md-datepicker?
<md-content>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>
PS: Adding a CSS class is just a simple use case scenario. There is a chance that more complex modifications might be required in future. Hence, I'm looking for a way to have control over the HTML of the material design if possible.
There is no way to modify rendered HTML directly.
You can check the source code to figure out the exact rendered HTML and the logic behind it. You can notice for example that the input have the class "md-datepicker-input". If you want to add a class, all you can do is to add a class to your md-datepicker tag (let's say 'my-class'), and then make appropriate selector in your css, for example: md-datepicker.my-class input.md-datepicker-input
Is there a way to remove the :hover from a css inline in angular without removing the whole class?
Like the following removes the whole class:
ng-class="{'option-selected' : option.chosen}"
But say option-selected had a option-selected:hover
Is there a way to remove :hover inline within the ng-class?
Attach the hover to another class that you can toggle.
Somethign like
ng-class="{'option-selected': option.chosen, 'option-hover': option.hover }
Then in your css for when setting up the hover you would have
.option-selected.option-hover:hover{
...
}
That way, the only way the hover will work is if both classes are on it.
Besides that, no there is no way to get around the hover from css unless you start dropping in !important's everywhere.
I want to apply something like this
a:visited{background-color:#0F0;}
to all <a> tags, if at least one of them has been clicked.
I know how to do it using JavaScript, but is there a pure CSS version?
I doesn't have to be <a> or :visited, I just want to highlight all occurrences with a certain tag or class if just one of them gets selected/hovered.
I'm not too clear on the effect you want, and why you want it, but there's no way to do this with CSS, you're stuck using javascript :(
As I understand, you want to style all <a> tags if one has been hovered or clicked? Why not just make that the default style, it will probably only take 2 seconds until that happens.