Is there a way to determine which attribute to render on an element? For example, say I wanted to style a div to have a green background if my count variable is greater than 5, but give it a ui-view directive otherwise?
Let's take an unrealistic example written in pseudocode
<div ng-if="count > 5 ? {style='background: green'} : {ui-view='home'}">
</div>
Is this plausible? I may be approaching it the wrong way but I wanted to know if this could or should be done (I'm thinking custom directives could help but I wanted to keep this as lightweight as possible)
Any help or discussion is appreciated!
You can simply do:
<div ng-if="myCondition"></div>
<div ng-if="!myCondition" ui-view></div>
In order to avoid code duplication I suggest to use ng-include:
<ng-include src="template"></ng-include>
Yes it is, ng-class is made for that
<div ng-class="{{ 'green' : (count > 5) ; 'red' : (count != 5) }}">
</div>
// where green and red is class name not style
You can also use a variable for the class name
<div class="base-class" ng-class="myVar">Sample Text</div>
or ng-style
http://plnkr.co/edit/pCplLBymY1nmX7Bmb0uO?p=preview
<span ng-style=" count > 5 ? { 'background-color':'red' } : { 'background-color':'green' }" >Sample Text</span>
Related
I have a directive template with the following code
<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}"> </div>
<div class="clearfix"></div>
<div>Standard colors</div>
<div class="color_squares">
<div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
<div class="color_swatch" style="background-color: {{ color }};"></div>
</div>
</div>
<div class="clearfix"></div>
In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color.
But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.
{{color.trim() == ngModel.trim()}}
I have debugged the code and the values are exactly the same.
What I am missing?
This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
To resume this article : never use raw fields use always a dot. So in your scope change
$scope.ngModel
By
$scope.data.ngModel
And in your html change ngModel by data.ngModel.
When using dot you may have some undefined error, this is because you have to initialize the object :
$scope.data={};
Of course you can jsut rename your variable, but you may still have a problem with others directives.
I solved this by removing curly braces around color and using ng-style
<div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" > </div>
I'm looking to change my background-image on buttons click.
I tried to use on my div: ng-init="select=1" ng-class="{'first-part': select == 1}" ng-class="{'sec-part': select == 2}"
and to check the varable to change the class but I can't using this variable out of the view.
My index code is like this :
<body ng-app="myApp">
<div ng-include="'views/header.html'"></div>
<div ng-view></div>
<div ng-include="'views/footer.html'"></div>
</body>
So my buttons are on the view and the css class to change on header.html.
Thanks guys for your help.
Nam's
Take a closer look at the documentation (and examples) of ngClass. You'll see:
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
That means for you, you should try:
ng-class="{'first-part': select == 1, 'sec-part': select == 2}"
<div id="parent" ng-class="{testClass:???}">
<span id="child" class="test"/>
</div>
On this example, how would I do it so that if element child would have a class test, the parent element would dynamically have the class testClass?
You can create a scope variable to validate whether those 2 elements should be visible or not.
The inner span too should be getting set dynamically according to your description. So you can use ng-class for that too.
So the code can be like this :
<div id="parent" ng-class="{testClass : isValid}">
<span id="child" ng-class="{test : isValid}"/>
</div>
You can add the ternary condition within the ng-class like
var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">
and put in your css file the classes
.class-if-true{color=black}
.class-if-false{color=white}
I have following directive like "pulsate" with restrict option class. I need to write condition like as below.
<div class="{pulsate : $index === 2}">
I tried this but its not working fine. So please help any one.
You need to use ng-class directive in order to achieve the solution.
<div ng-class="{pulsate : $index === 2}">
Use single commas around your class name like so:
<div ng-class="{'pulsate' : $index === 2}">
Folks,
I am looking through a array in angular. For each element in the array there is a width attribute which dictates what the width of this element should be on screen. However, this does not get renedred for some reason.
The array is as below:
$scope.header = [
{'column':'name', 'width':'300'},
{'column':'city', 'width':'300'},
{'column':'address', 'width':'300'},
{'column':'age', 'width':'300'}
];
The view is as below
<div ng-repeat="element in header" >
<span ng-bind="element.column" style="display:inline-block;width:{{element.width}}" >
</span>
</div>
Please advice
you should try ng-style
ng-style="{width: element.width + 'px'}"
C. S. is right about needing {{element.width}}px. Here's a fiddle to demonstrate. http://jsfiddle.net/nordyke/T7cW7/
All you need to do is add px after your {{expression}}, here is the working fiddle
<span ng-bind="element.column" style="display:inline-block;width:{{element.width}}px" >
or even this:
<span ng-bind="element.column" style="display:inline-block;width:{{element.width+'px'}}" >