I have an item in my array that is true or false.
I use this to say
<div ng-show="{{ item.isDirectory }}">
I also want to use the same rule to apply a class to that div if item.isDirectory == true
First, it's incorrect:
<div ng-show="{{ item.isDirectory }}">
ngShow waits an expression, it works just as below:
<div ng-show="item.isDirectory">
Also, preferably use ngIf directive as a good practice.
To apply a class in your div based on a condition, you should use ngClass directive:
<div ng-class="{ 'yourTrueclass': item.isDirectory, 'yourFalseClass': !item.isDirectory }"></div>
Take a look on this tutorial.
Related
I am using ng-repeat for multiple child directives. On the first instance of the child directive, I want to set the attribute 'doAutofocus' to true. When I try my code below, I get a parsing error.
Error: $parse:syntax Syntax Error
My directive 'tradePanel', has a scope of {trade: '=', doAutofocus: '='}
When my ng-repeat $index == 0, I want the doAutofocus to be true, else false.
I use blade templates on the server side which use {{ }}.
For angularjs templates, I am using:
$interpolateProvider.startSymbol('{%');
$interpolateProvider.endSymbol('%}');
How do I get my doAutofocus attribute set correctly for my first instance?
<div class="row">
<div class="col-xs-12 col-sm-12 col-sm-6" ng-repeat="trade in deal.trades">
<trade-panel trade="deal.trades[$index]" ng-attr-do-autofocus="{% ( $index === 0 ) ? true : false %}"></trade-panel>
</div>
</div>
Since you are using two-way binding for your doAutofocus directive scope attribute, you cannot use interpolation here. Simply write the expression you wish to pass to the directive. This has to be an existing value on the parent scope. Since we are inside ng-repeat block you can just use the provided $first variable:
<div class="col-xs-12 col-sm-12 col-sm-6" ng-repeat="trade in deal.trades">
<trade-panel trade="trade" do-autofocus="$first"></trade-panel>
</div>
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.
how to combine such usage of ng-class?
I need to use together function hich returns class, and expression, which evaluates another class
data-ng-class="{active: field.Selected} getDisplayClass(field.Size)"
You can do it as follows
<div data-ng-class="{active: field.Selected}" class="{{ getDisplayClass(field.Size) }}"> ... </div>
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
I need to show and hide a div. I do it by putting true of false values into the ng-show
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingRoof}}">
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingObs}}">
But this is what i get:
<div id="roofPropertie" class="drawingToolPropertie ng-hide" ng-hide="true">
<div id="ObstaclePropertie" class="drawingToolPropertie ng-hide" ng-hide="false">
values chage but that ng-hide class stays and as result those divs are always hidden. How do i fix this ? Why is this working like this ? I'm not using jquery.
ng-show/ng-hide uses no double brackets
ng-show="drawingMods.settingRoof"