We Keep Coding

AngularJS rel attribute binding

I am using ng-repeat to create a list of videos. I need to set rel attribute of image in each row. I am trying in following way:
<li ng-repeat="video in top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
It is binding the video.name in h3 tag but not binding rel with video.video_image value. Instead of video.video_image's value, it is binding it as a string i.e http://localhost:9000/%7B%7Bvideo.video_identifier%7D%7D. My video.video_image has valid image urls like http://my-cdn-server/vaild-image.jpg.
I have lot's of theme related jQuery methods, which need a valid rel value.
Please help me to make it work.

There is a really good read on understanding the scopes at AngularJS give it a look even if this is not the cause it will give you a great understanding on basic concepts:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
or just watch the video (3 min)
https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m
What I believe the issue is: top_videos is a plain variable usually this causes troubles when accessing an object inner attributes when using angular 2 way binding, the general recommendation is that there should be an additional level (topLevel.your object):
<li ng-repeat="video in data.top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
Obviously that additional level should be added everywhere where you are using your variable

Angular ng-repeat $index doesn't work in ng-if directive on mozilla firefox

I am making use of ng-repeat to display items in an array. For each item, i check that the $index satisfies a condition.
In chrome and even Internet Explorer, this works perfectly without a hitch. However, in Mozilla, it seems to update the $index only after the ng-repeat is concluded. So, the conditions do not work a lot of the time. An example of such conditions is:
<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="img.first == true">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
In response to Lorenzo's answer, i have also tried
<div class="active item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index == 0">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
<div class="item" data-slide-number="{{$index}}" ng-repeat="img in attraction.Images" ng-if="$parent.$index > 0">
<img ng-src="{{IMG(img.FileName + img.FieExtention)}}" class="img img-responsive">
</div>
I am almost going mad here ... Please help

ng-if creates a child scope.
To access $index you need to use $parent.$index to access the parent scope of ng-if (so the scope of ng-repeat)

it's not a good idea to use ng-repeat and ng-if on the same element.
both create their own scope, hence it is not recommended to do so.
generally speaking it's a good idea to avoid using other directives in combination with ng-repeat on the same element whenever possible.
you should create a child element withing the ng-repeat element and put other directives on that child element instead.

AngularJS not parsing curly braces properly

<li ng-repeat="appliance in appliances | limitTo:2">
<div class="icon">
<img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
</div>
<div class="label">{{ appliance.Label }}</div>
</li>
In AngularJS I can see in the console that it tries to load '/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'. Now my ng-repeat works just fine. If I decodeURIComponent I see that the above %7B and %7D are '{' and '}' respectively. How can I prevent this error from happening?

Use ng-src here instead src
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\
For more info see this link https://docs.angularjs.org/api/ng/directive/ngSrc

You have to use ng-src, if you use src, the browser tries to load the image before angular's loaded, that's why ng-src exists.
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

Cascading expression in AngularJS works with ng-show but not with ng-if

The following block of code work if I use ng-show to display sections but not with the desired ng-if
<div ng-controller="nullController">
<button ng-click="p = 1">click to reveal next</button>
</div>
<div ng-show="$$prevSibling.p == 1" ng-controller="nullController">
<div>Appears based on previous sibling state</div>
<button ng-click="p = 1">click to reveal next</button>
</div>
<div ng-show="$$prevSibling.p == 1" ng-controller="nullController">
<div>Appears based on previous sibling state</div>
<button ng-click="p = 1">click to reveal next</button>
</div>
See in Plunker ng-show
See in Plunker ng-if
UPDATE: someone pointed out that the version of the angularjs lib in the plank did not have ng-if. Now I have updated to use 1.2.x the problem however did not go away.

You are using angularjs 1.0.1 !
ng-if didn't exist in this old version yet.
Only the versions above 1.1.5 handle the ng-if directive.
You really should rather choose this version (the latest stable one) for your plunkr for instance:
<script data-require="angular.js#1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
Here's a more official data to show that ngIf was available since 1.1.5.
Furthermore, pay attention that ngIf creates a new child scope.
Indeed, it needs this mechanism in order to achieve the delete of the component from the DOM.
ng-show does not need it since it simply hide the content.
Thus, $$prevSibling would not target the expected scope, since called from a deeper scope in the scopes' hierarchy.

Updating CSS using AngularJS

I am new to AngularJS and I would like to learn the best way to do this.
Here's my issue:
I have an anchor, that - after clicking on it - should toggle between classes "show-all" and "hide-all", and also update the css of a div.
Here's what i have so far:
<a class="{{state}}" href="#" ng-click="ToggleDisplay()"><p>{{stateTitle}}</p></a>
<div>CSS should be updated here</div>
And a bonus question: is there and easy way to transition the CSS change on the div (which is from height:200px to height:auto)?

to do a show all, hide all methods you can use the ng-show or the ng-hide methods, binding a keyword in it, you can make a method to use with the anchor to solve you're problem like that way
HTML
<a ng-click="showAll()">show all</a>
<p ng-show="hide">things to hide</p>
<p ng-show="hide">other things to hide</p>
JS
$scope.showAll=function(){
if($scope.hide==false){
$scope.hide=true;
}else{
$scope.hide=false
}
}
Another great way is the ng-class method where you can put a style code and make it a variable to change in your js file.
EDIT
a sample for ng-class:
<div ng-class="heightsample">i'm a div 100px's height</div>
<button ng-click="height-change()">change</button>
JS
$scope.heightsample={height:'100px'}
$scope.height-change=function(){
$scope.heightsample={height:'50px'}
}