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>
Related
I have a problem I have created a directive which is doing ng-repeat on an array of objects
---Showing the value on gui------
Now I want that if I click on any div of this repeat that particular div's background color should change
I have tried something like this
link:function(scope,element,attributes){
$(element).on('click',function(e){
$(element).addClass('A');
$(element).removeClass('B');
})
}
You can use the ng-class directive to apply classes on specific occurences, in your case in combination with the ng-click:
<div ng-repeat="item in items"
ng-class="{A: item.clicked, B: !item.clicked}"
ng-click="item.clicked = !item.clicked">
<!-- .. content -->
</div>
See this jsfiddle for example
You can try something like this, but this will need more workaround.
<div ng-click=“changeBackground($event)”></div>
// In Controller
$scope.changeBackground = function(event){
event.target.style.background = “#000”;
}
It would be better if you can submit your code.
I was wondering if it is possible to have an ng-if be true if an element has a certain class.
Example:
<div class="edge" ng-repeat="item in items">
<div ui-view ng-if="(ng-repeat div has class of edge)"
Practically you can use hasClass method with angular element:
angular.element(myElement).hasClass('my-class');
So you can create a function and put the check in it and use that function in ng-if.
<div class="edge" ng-if="check()" ng-repeat="item in items">
However, remember that you cannot access the element in ng-if (vs you can pass the $event to ng-click and access $event.target) , need to create a directive to do it.
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>
<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}
For example, is there a way for:
<div ng-switch on="value">
<div ng-switch-when="1"> 1 </div>
<div ng-switch-when="2"> 2 </div>
</div>
to "return" the final form as simply (pretending that value = 1)
<div ng-switch-when="1"> 1 </div>
without the encompassing div?
Or is there another directive that can do this?
It would save me a lot of modifying CSS...
I recommend using ng-if:
<div ng-if="value==1"> 1 </div>
<div ng-if="value==2"> 2 </div>
Example: http://plnkr.co/edit/h8uap4NMJ9uGsFDy8Ck7?p=preview
Yes you can use ngIf Directive to add element into DOM conditionally.
ngIf
<div ng-if="myVar == '1'">Hello world</div>
This DIV will render only if value of myVar is 1.
Note : ngIf will create new scope. It won't work with ng-repeat.
For ng-repeat, you can use ngShow or ngHide directive. It works same as ngIf but it just add display:none by css class named as hide. So its better to use ngIf. ngShow or ngHide is expensive.
ngShow
<div ng-show="myVar == '1'">Hello world</div>
ngHide
<div ng-hide="myVar == '1'">Hello world</div>
By using this, you will not see Hello world but it will be in DOM