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"
Related
Is it possible to have ng-show or ng-hide work on Ionic icon elements?
<i ng-show="seat1" id="space-1" class="ion-record"></i>
<i ng-show="seat2" id="space-2" class="ion-record"></i>
<i ng-show="seat3" id="space-3" class="ion-record"></i>
<i ng-show="seat4" id="space-4" class="ion-record"></i>
Yes.
Alternatively, you could wrap the icons in divs, too.
<div ng-show="seat1"><i id="space-1" class="ion-record"></i></div>
<div ng-show="seat2"><i id="space-2" class="ion-record"></i></div>
<div ng-show="seat3"><i id="space-3" class="ion-record"></i></div>
<div ng-show="seat4"><i id="space-4" class="ion-record"></i></div>
Yes, you can use ng-show or ng-if on every elements.
ng-if actually removes or recreate an DOM element, while ng-show only makes DOM element hidden or not. In this case if for example seat1 is falsy, the element will have class="ion-record ng-hide" and this ng-hide class makes your item
{display: none !important;}
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.
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 fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.
HTML:
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
Item
</div>
</div>
My Directive:
scope.$apply(function () {
scope.$parent.showItem(index);
});
Controller:
$scope.teamDrop = function(index) {
$scope.hidden[index] = false;
};
You can use the ng-show and ng-hide directives to hide and show elements.
You can also use the ng-if directive to remove elements from the dom.
For your example I'd change your ng-class to an ng-hide
<div class="row" data-index="{{$index}}">
<div>other information</div>
<div class="item hidden" ng-hide="hidden[$index]">
Item
</div>
</div>
You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.
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