I have the following HTML element with AngularJS directives:
<div class="progress">
<span ng-repeat="timeRangeObject in timeRangeObjects" style="width: {{timeRangeObject.percentage}}%" ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING'" />
</div>
So I concat more than one progress bar with different types/colors.
With the checkbox I will set specific progress bars to color transparent.
Therefore I would need something like this:
... ng-class="vm.showVacation == true ? 'progress-bar timerange-{{timeRangeObject.containerType}}' : 'progress-bar timerange-PADDING | timeRangeObject.containerType == 'XY''"
-> so I would need a filter concerning the ng-class else statement.
Is this possible? The important thing is that only color should change but progress bar should stay where it is.
Thanks a lot
[EDIT]
Here is a link to my problem:
My Example
You have a done a lot of thing that is better if you correct first of all don't use style="width:{{}}" is better if you use ng-style so you don't have to use the bracket, and to answer to your question you can write like this in your ng-class:
<div ng-class="foo()">
js
$scope.foo=function(){
return /*here you put your condition sorry but i didn't understand
the conditions you need*/
}
you can do this with your style attribute too.
Related
https://tburleson-layouts-demos.firebaseapp.com/#/docs
How I can set direction regard to some value
<div if(value) fxLayout='row' else fxLayout='column'>
I just think this is sufficient for answer your question:
Code in component:this.anyVal = true; // use any logic here to set this value
Element in template: <div fxLayout="{{anyVal ? 'column' : 'row'}}">
Good luck!
Assuming you are trying to use a different layout on a responsive beaviour, then you only need to use the flex layout breakpoints such as fxLayout.sm="column".
Here is the full list of the available breakpoints https://github.com/angular/flex-layout/wiki/Responsive-API#mediaqueries-and-aliases
So, your tag should look like this:
<div fxLayout="row"
fxLayout.sm="column" >...</div>
If you need it, you can use more than one breakpoint:
<div fxLayout="row"
fxLayout.xs="column"
fxLayout.sm="column"
fxLayout.md="column">...</div>
If you want to learn more about the flex layout in angular besides de official documentation you can check this great tutorial: https://alligator.io/angular/flex-layout/
Hope this works!
Happy coding!
So I'm trying to create a directive for a some kind of stepper arrow progress bar.
Please see this codepen to understand what I'm talking about. (Note that i wrote the params in the function scope to have an easier read).
The problem I am facing now, is that I wanna pass the colors as param to my directive and I need to apply the colors to both the class and the :after property.
I use that sample to change the background-color of the block-head class, using ng-style. The ng-class I use is to get plain start and end.
<div ng-repeat="element in elements"
class="block-head"
ng-class="{'block-head-first': $first, 'block-head-last': $last}"
ng-style="{'width' : selectedKey === element.key ? 'calc(100% - ' +
widthCalc + 'px)' : '',
'background-color': getColor($index)}">
$scope.widthCalc = ($scope.elements.length - 1) * 26
$scope.getColor = function($index) {
if ($scope.elements[$index].key === $scope.selectedKey)
return $scope.colors['current']
if ($scope.elements[$index].key < $scope.selectedKey)
return $scope.colors['success']
if ($scope.elements[$index].key > $scope.selectedKey)
return $scope.colors['disable']
}
Below is the sample of code I wanna change with ng-style (I set it to lightblue so you understand visually what i'm trying to change).
.block-head:after {
color: lightblue;
I thought of two potential fixes but I have no idea on how to do them. First would be to 'heritate' the color value from the parent in background-color in pure css (not even sure that it is possible ?). Second would be to create classes in my js code and use those classes using ng-class.
All the related questions (here, and here) always advice to use ng-class, but I see no obvious fix with it on my case.
I'm probably not fully awake so overseeing the obvious is possible.
But I have 2 variables that decide if a div has a specific class or not.
The class is more acting like a toggle; so the following should happen to trigger the value:
focus => on
!focus && !hover => off
So when the focus var turns on the class should be added, and when the focus is lost and the hover is off it should be removed.
I would preferably do it inline on the following place:
<div ng-class="{'visible' : --FORMULA-- }"> </div>
Here you should only see the "WOhooooo" once you've clicked the input box, and then it should only dissapear when you leave the grey box:
http://codepen.io/cskiwi/pen/MKYNqo
You seem to already know the syntax, dont know what did you try. This should work...
<div ng-class="{'visible' : 'focus', 'notvisible' : '!focus && !hover' }"> </div>
Could somebody please tell me where this is going wrong? I basically have a simple check of a value - if the value is true, it should set the class to headerOn. If false, it should be headerOff. Easy. Here's the code:
<div ng-class="headerCheck ? 'headerOn' : 'headerOff'">
And the function that I hit:
$scope.headerControl = function() {
$scope.headerCheck = true;
console.log($scope.headerCheck);
}
I can confirm that the log is true. Any ideas why this isn't working for me?
The problem is the syntax here.
The correct approach would be these:
<div class="{{headerCheck ? 'headerOn' : 'headerOff'}}">
or
<div ng-class="{'headerOn': headerCheck, 'headerOff' : !headerCheck }">
The syntax for ng-class is wrong, it should be:
ng-class="{'headerOn' : headerCheck, 'headerOff' : !headerCheck}"
What you have is correct, but you are not telling angularjs that it needs to evaluate what is in the "" as an angular expression. As Karthik stated, you could change the div to
<div ng-class="{headerCheck ? 'headerOn' : 'headerOff'}">
which then makes headerCheck ? 'headerOn' : 'headerOff' an angularjs expression.
EDIT:
Since you did not give a chunk of your code and only gave you snippet, you may want to make sure that the div you referenced in your question is being controlled by the same controller that has your $scope.headerControl function included in.
I have been looking with no success to see if I can dynamically apply a css style to JSF component or div using javascript. Is this possible.
This is pseudo code
<div style="myJSStyleFunction("#{myBean.value}")"> stuff </div>
And the function would return something like "position:relative;left:25px;"
I've had no luck and maybe it can't be done but would like a second opinion.
Edit:
I'm trying to see if I can keep a separation / reduce the coupling between the presentation/view and the model/controller. This is for indenting commenting or product reviews (to nest replies to comments or reviews). The most I really want to track is an integer on how deep a reply is. First level = 0 second level = 1, and so on. So a comment or product review would be 0 deep, a reply to the comment or review would be 1 and so on.
Then in the EL I wanted to call a javascript function and do something like
<script>
myJSStyleFunction(depth){
if(depth<=5){
var nest=20*depth;
var style="position:relative;left:" + nest + "px;";
return style;
}
}
</script>
And then then say for a third level comment (a reply to a reply) it would look like this:
<div style="position:relative;left:40px;"> stuff </div>
where
#{myBean.value}
evaluates to 2
I suspect like Daniel says I'll have to tightly couple the view but I'd rather not have to. I'd think there has to be a way. But maybe not.
I don't know where there are cleaner solutions for this. However this is one suggestion.
Assume your page looks like below and myBean.getValue() method returns an integer.
<h:form id="frm">
<div style="#{myBean.value}"> div1 </div>
<div style="#{myBean.value}"> div2 </div>
</h:form>
So you can do something like this at 'window.onload'.
<head>
<script>
window.onload = function() {
var childList = document.forms['frm'].childNodes;
for(var i = 0; i < childList.length; i++) {
if(childList[i].nodeName == 'DIV') {
var _div = childList[i];
var depth = _div.getAttribute('style');
_div.setAttribute('style', 'position:relative;left:' +(depth *20)+ 'px;');
}
}
}
</script>
</head>
Note: 1. In above sample code I assume all the DIVs inside the form should be indented.
2. For IE you may need to use _div.style.setAttribute('cssText','position:relative;left:' +(depth *20)+ 'px;')
3. Another solution for your question is using <script> tags immediately after your divs and putting the js part inside them. In this way you don't have to use fake styling style="#{myBean.value}" or window.onload event because you can directly call #{myBean.value} in your script.
I decided to skip the javascript approach and settled on a simpler and I think cleaner method to create the dynamic css classes for my situation. I already capture/calculate the depth value for each comment when it is entered. So I am just returning that value in EL and concatenating it to a 'base name' for the css class like so:
<div class="indent_#{(comment.commentDepth le 5) ? comment.commentDepth : 5}" >
comment comment blah blah blah
</div>
"indent_" is the base name for the css class. So for a 0 level comment it will have a class="indent_0". A reply to that comment will have class="indent_1".
I use the ternary so that if there are lot of replies under a given comment it doesn't indent right off the right hand side of the page. Even though you can keep going deeper, it will only indent up to 5 levels.
For my case at the moment, this is a simpler and cleaner method of adding some dynamically generated css class names. Right now I have to define 6 classes for this in the css file, but perhaps I'll figure out how to nest the boxes but it isn't a priority this works just fine for me for now.