Develop Reference

how to use {{}} expression inside ng-if

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">

rendering html dynamically using Aurelia

I have a requirement where I get the string in the form of HTML tags and it changes on a button click. On button click, I am changing the value of the binding element.
<div id="htmString">${htmlTag}</div>
and the content in htmlTag is
<p>Hello World!</p>
How can I skip writing document.getElement in the view model and still compile the HTML.

You just need to bind to the innerHTML property like this:
<div id="htmString" innerhtml.bind="htmlTag"></div>
So any time htmlTag changes it will get rendered inside your div.

AngularJS: special ng-if for directive to be applied / not applied

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.

What is the best way to only display some of the html elements in the ng-repeat loop

I want to use an ng-if inside an ng-repeat (as described in this question):
However, I want to display a row in a table if and only if the if condition holds. In the answers to the question above, you will get empty div tags where the if condition does not hold. This does not cause much of a problem with divs, but when doing the same with tables, you do not want to have div (or span) tags inbetween tr tags.
Is there another tag or directive that I could use?

A better idea is to use a (custom) filter.
That way, only the needed rows are generated, in stead of hiding/removing existing ones.
I just made a plunk for another question, that showed how to use a filter:
the relevant line is this one:
<tr ng-repeat='item in appVm.users |filter:test'>
you can use a object directly in your code like this:
<tr ng-repeat='item in appVm.users |filter:{age:32}'>
If you put that line in the sample I linked in, you can see how that would work out!
Does this help you?

If you just want to hide these elements, you can consider using ng-show instead of ng-if.
Maybe you can also add the ng-show in the ng-if tag to hide it when empty.
Now, if you do not want to render the content at all, I think the only solution is to remove these elements from your collection in your controller

you can use ng-show.its works for show and hide tags.if you don't want to angular compile inside the tag you can use ng-if.

Show sibling element on mouseover using angular

I have many repeated content elements in a single view. Within each content element, there's an anchor. When a user mouses over this anchor, I want to toggle a class on a sibling element within that particular content element.
Here's a simple example of what I want to do:
<div class="content-element">
<div ng-class="visibleClass">
I should have class 'visible' when the user mouses over the link within content-element div.
</div>
<a ng-mouseover="" ng-mouseleave="" href="#">Mouseover</a>
</div>
I initially wrote a controller to handle this, but the controller's $scope is tied to the entire view, not a single content-element, so this turned out to not be a graceful solution.
There are many 'content-elements' that are not generated with angular, but are just repeated in the template.
I'm fairly new to angular and trying to wrap my head around this new way of thinking. I can definitely solve this problem easy writing some javascript (capture the event, get the target, get the sibling, etc.) but this doesn't seem like the proper way to do it with angular.
So... what's the appropriate angular way to do this? Should I be writing a custom directive?

Simply create a directive with a new scope and have something like this in the HTML:
<div class="content-item">
<div class="" ng-class="{someClass:hovered}">My transparency should change.</div>
<a ng-mouseover="hovered = true">Mouseover me.</a>
</div>
PLUNKER
Note that if you use ngRepeat, it creates isolate scopes automatically and you don't need the directive.

Directive which founds siblings of the element on mouseover event. You can do what you want with the siblings then:
app.directive('mousiee',function(){
return{
restrict: 'A',
link: function(scope,elem,attrs){
var siblings;
elem.on('mouseover',function(){
siblings = $(elem.parent()).siblings();
console.log(siblings);
});
}
};
});
http://plnkr.co/edit/gWkNpiHMUEUBwuug9C3q?p=preview
(Note that I've added jQuery to your index.html)