Is it possible to add a complex class to a div like this:
<div class="{{'border-wrp'}} {{pageType}} {{borderStyleClass}} {{borderColourClass}}" > </div>
THanksss
ng-class is used to add classes conditionally.
Like this
<div ng-class="{'yourclass':true,'yourclass1':false}"></div>
Related
I have below sample html markup
<div ng-style="{'height' : myHeight +'px'}" ng-dblclick="myCtrl.clickme()"></div>
How I can add conditionally in DOM ng-click or ng-dblclick attributes in markup??
There is no way to do it in the same markup, however you can have two markups and apply condition as,
<div ng-style="{'height' : myHeight +'px'}" ng-if="contitionforDblClick()" ng-dblclick="myCtrl.clickme()"></div>
<div ng-style="{'height' : myHeight +'px'}" ng-if="contitionforClick()" ng-click="myCtrl.clickme()"></div>
I am newbie for angular. I want to apply condition in ng class for particular classes.
Here is code:-
<div class="main-tb-div tab-pane fade in active" id="fdDiv">
I want add in and active classes dynamically.
Somethings like:-
<div ng-class="advisory-tab-n tab-pane fade {'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}" id="fdDiv">
You can do this:
Add all static classes in class and dynamic class in ng-class.
<div class="advisory-tab-n tab-pane fade" ng-class="{'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}" id="fdDiv">
You need to use an array:
<div ng-class="['advisory-tab-n', 'tab-pane', 'fade', {'in':$root.mainSegment=='fd', 'active':$root.mainSegment=='fd'}]" id="fdDiv">
See here for more info.
I have a div like this:
<div ng-switch-when="checkbox">
I would like to add a conditional style attribute to it when the length of an array in my scope is > 5
I tried this but it isn't working
<div ng-switch-when="checkbox" ng-attr-class="{{myArray.length > 5 && 'style='height:250px; overflow:scroll;''}}">
define a class in your CSS file, say .overflow.
Then do this:
<div ng-class="{'overflow' : myArray.length > 5}"></div>
You should create some class first with these style:
.extraStyle{
height:250px;
overflow:scroll;
}
then apply ng-class in div:
<div ng-switch-when="checkbox"
ng-class="{extraStyle:myArray.length > 5}">
Notice: You should use data- with all directives if you want your code to be proper for HTML5 standars. For Example:
data-ng-class
you can define your style in your css file, for example:
.mystyle{
height:250px;
overflow:scroll;
}
then you can add this class to your div as an ng-class
<div ng-class="{mystyle: mycondition}"></div>
I have a directive which uses three different templates:
http://jsfiddle.net/edwardtanguay/pLrkya7r/4
These templates each have a panel and I want them to include a header template which is the same for each of them, like this:
<script type="text/ng-template" id="itemMenuTemplateUndefined">
<div class = "panel panel-default" >
<div ng-include="'itemMenuTemplatePanelHeading'"></div>
<div class="panel-body">
<div>Age: {{item.age}}</div>
</div >
</div>
</script>
The included template looks like this:
<script type="text/ng-template" id="itemMenuTemplatePanelHeading">
<div class="panel-heading">{{item.firstName}} <b>{{item.lastName}}</b> (PROBLEM INCLUDED BUT NO COLOR)</div>
</script>
The problem is that although it includes the scope variable values and HTML, it doesn't seem to have the same HTML structure which causes e.g. the panel header color not to display.
How can I get this example to work so that it has the same HTML structure as without ng-include so that Bootstrap continues to work?
The problem is that the bootstrap css is very specific in targeting the panel heading as a direct child of the panel using selectors like .panel-warning>.panel-heading.
The extra <div> for the ng-include breaks this child relationship making it
<div class="panel">
<div ng-include>
<div class="panel-heading>
Some possible choices:
Add appropriate classes to the ng-include div
Copy the css rules and replace the > in selector with a space
Use your own directive instead of ng-include and within the options
set replace:true
I have an element:
<div class="wrapper" > ... </div>
I know I can use angular to apply a class conditionally:
<div ng-class="{'wrapper-big': style.big}" > ... </div>
But I want to keep a static class and add 'big' using angular.
Desired output:
<div class="wrapper big" > ... </div>
So the class big is what I want to conditionally add.
you can use the class and ng-class attributes together.
<div class="wrapper" ng-class="{'big': /*CONDITION*/}" > ... </div>
use the array syntax of ng-class.
e.g.
<div ng-class="[style1, style2, style3]" > ... </div>
Here is an example - https://docs.angularjs.org/api/ng/directive/ngClass