I'm using Fire base to retrieve the user object, inside the object there is type which is admin or normal user.
$scope.User=$firebaseObject(fireBaseData.refUser().child(user.uid));
now i'm trying to use ng-if to change the view of each user
<div ng-if="{{User.type}}==admin">
i have tried another approach by changing the field to admin either true or false
<div ng-if="!{{User.admin}}">
but still not working in both cases, the problem is i think in using {{}} inside the ng-if directive
You dont usally use {{}} in directives. Just the following code would be sufficient:
<div ng-if="!User.admin">
The ng-if directive removes the HTML element if the expression evaluates to false.
If the if statement evaluates to true, a copy of the Element is added in the DOM.
The ng-if directive is different from the ng-hide, which hides the display of the element, where the ng-if directive completely removes the element from the DOM.
Hence, both of given is correct:
<div ng-if="User.type==admin">
<div ng-if="!User.admin">
Related
One of my mates in work show me a really weird behavior of one-time binding in angular.
UseCase:
When you have an element which text is binding by that one-time binding inside block which is conditional by ng-if, then if we change that value, for example adding some letters, and later change the condition of ng-if, and after that the value from one-time binding has been refreshed.
HTML:
<div ng-if="a" class="blue">{{ ::text }}</div>
It is a kind of bug, or expected behaviour?
Here is an example of what I'm doing: http://codepen.io/samot/pen/rLJAdN
If the condition of ng-if is made false and then true, it will recreate its contents, causing the one-time ng-bind directive to be evaluated again.
The only thing one time binding does is to avoid adding a watch on your expression, but it doesn't "cache" or "store" the result for the case the content of a directive is compiled again.
So it's expected behavior.
Works as expected because using ngIf directive the code is completely recompiled. If you use ngShow the behavior changes and code behaves as you are expecting from ngIf. This because code is only hidden and not recompiled, so not causing the re-(first)-evaluation of the variable.
Let's say I have a block
<div class="myclass" mydirective="mycontrol.param">
</div>
that is repeatable (used) several times (but different by different parameters) in another directive.
I need to add the conditional to mydirective so it is persists in the block based on kind of ng-if true or false values for it.
What's the way to make it done?
P.S. What actually mydirective does is adds some DOM elemenets into the div it belongs to.
I want to be able to access a property from the ng-repeat scope in another directive of the same element where the ng-repeat directive resides. For example, I'd like to have access to the child.class property in the following example:
<div ng-class="{{ child.class }}" ng-repeat="child in parent.children">
{{ child.name }}
</div>
Here is a JSFiddle showing that this doesn't work.
If this isn't possible, what is the next best way to go about setting class on the element that has the ng-repeat? Is there a way to ng-repeat in a controller?
ng-class takes an expression and evaluates it. If you change it to:
ng-class="child.class"
then it works! Here is a working JSFiddle.
Also just to mention, you can put in something like this:
ng-class="{'blue': true, 'red': false}"
true or false can be other variables or functions, but it only adds the classes with a value of true!
ng-class documentation
I have a first div tag on a webpage. It contains some angular scope variables. I want to replace it with a second div tag which also contains some other angular scope variables when something happens.
The first way I tried is to use "ng-show". I add both the first and the second div on html and set the first div tag to be visible and second one to be invisible by using ng-show and ng-hide.
<div ng-show="showFirstDiv">
</div>
<div ng-hide="showFirstDiv">
</div>
When I change $scope.showFirstDiv from true to false within the relevant controller and call $scope.$apply(), the ng-show and ng-hide attribute values change (after using inspecting element in a browser).
However, the visibility of those two html tags did not change. The first div didn't disappear even with ng-show="false" and second div did not show up even with ng-hide="false".
What should I do? Is there a better way to replace a div with another div in angular while both divs contain angular scope variables?
Have you tried ngIf?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.
<div ng-if="showFirstDiv">
</div>
<div ng-if="!showFirstDiv">
</div>
What is the proper way to dynamically add or remove directive from compiled and linked element?
I have a page that has bunch of inputs there (the list is pretty long, so i want to come up with a general solution). What i want to do is to disable all the inputs if specific flag set. I can do this by using jQuery's element.prop('disabled', true).
The problem of such approach is that if any of inputs have ng-disabled or ng-enabled directives attached, then on any their expression modification they will override previously set 'disabled' property. But I want them to not override my global flag.
I came up with the solution to add another bunch of watchers for ng-disabled or ng-enabled expression, but it seems to be not the best approach.
What I want to do, is to remove most of directives attached to the element and set appropriate attributes myself. But if I recompile and relink the element, and then replace it in the document, then I will get a memory leak, as the old element will be de-attached from the DOM document tree, and will remain in memory. I cannot destroy element's scope either, because those elements basically use whole page's main scope.
You can try something like
<div ng-show="someBoolean" >Some text or nested element</div>
or instead of "someBoolean" you can attach a function that resolves to a boolean. To set your boolean you could attach a ng-click to your input that updates your model/boolean value
<button type="button" ng-click="setBoolean()">Some text or nested element </button>
Because of angulars two way data binding the ng-show will be updated upon completion of the next digest cycle