Develop Reference

Angular ng-class not working but regular class attribute works

I have this view template that is a child to another view.
The parent view of this view is a child to the index.html where I am importing my angular and ui-router javascript.
i.e index.html > other view > view below
When I try to change the class = "bubble me" below - which works fine ,to ng-class = "bubble me" my css is not loaded. Am I missing something? The issue is isolated to this view only.
<div class="top"><span>To: <span class="name">{{chat.name}}</span></span></div>
<div class="chat">
<div class="conversation-wrapper">
<div class="conversation-start">
<span>Today, 6:48 AM</span>
</div>
<div class="bubble me" ng-repeat = "message in sent_received">
{{message.msg}}
</div>
<div class="write">
<input ng-model = "input.message" type="text" />
<a ng-click= "sendMsg()" class="write-link send"></a>
</div>

does ng-class work only for conditional classes? I would like to
combine my regular hard coded classes with the conditional ones so I
dont have both a class attribute and an ng-class attribute in my
tags..is there no way of doing this? - in the code above the bubble is
not dynamic. I would like to make the me class only dynamic
This might work for your case.
ng-class="value=='true'?'bubble me':'bubble'"

How to set scope variable inside ng-repeat?

I want to determine whether any ng-repeated element is rendered.
I write this code
<div ng-show="anyRendered">Any has been rendered</div>
<div ng-show="anyFilterActive">ANY FILTER IS ACTIVE</div>
<div class="selected-filter-value" ng-if="filter.name && filterCtrl.isActiveFilter(filter)" data-ng-repeat="(name, filter) in filterOptions">
<span ng-init="anyFilterActive = true;">{{filter.name}}:</span>
</div>
But this code doesn't work. Also I try to write $parent.anyRendered inside ng-repeat.

Try with ng-if
<div ng-show="filterOptions.length > 0">Any has been rendered</div>
<div ng-if="filterOptions.length > 0" ng-repeat="(name, filter) in filterOptions">
<span></span>
</div>

just use $index
<div ng-repeat="(name, filter) in filterOptions">
<span ng-show="$index > 0"></span>
</div>
ngRepeat Docs $index
In the example in the ng-repeat docs u can see the usage of $index

You must not write code logic in your templates: all the code must be in your controllers, filters, directives and services. The ng-init directive is only here so that you can create aliases to make your templates simpler.
Filters and directives contain "presentation code" and controllers and services contain "business related code".
You could create a filter to know if an object is empty or not (filter code from another question), and use it with ng-if, ng-show...
Resulting template:
<div ng-if="filterOptions|empty">
Nothing to show!
</div>
<div ng-repeat="(k, v) in filterOptions">
{{k}}, {{v}}
</div>

using ngIf with ngRepeat

Hi i am trying to use two types of ng-repeat statements based on the codition using ng-if. Somehow it is not working.
Code:
<div ng-if="orderby === '0'">
<div ng-repeat="user in users | filter:search"></div>
</div>
<div ng-if="orderby === '1'">
<div ng-repeat="user in users | filter:search| orderBy:'-timestamp'"></div>
</div>
I have two controller, they are using the same template. In one template i set the value of $scope.orderby = '0' . In this template i want to use ng-repeat without orderBy and vice versa.
This isn't working out. Is there other way of doing this type of functionality?

Create object : someObjectName.orderby instead of primitive variable orderby.
And your binding will be:
<div ng-if="someObjectName.orderby === '0'">
<div ng-repeat="user in users | filter:search"></div>
</div>
<div ng-if="someObjectName.orderby === '1'">
<div ng-repeat="user in users | filter:search| orderBy:'-timestamp'"></div>
</div>
ng-repeat have another scope and your orderby variable out of ng-repeat is not same in orderby inside ng-repeat scope.
Read this article for more information about scopes: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Angular JS ng-switch with ng-include?

I have 3 different code fragments which I'd like to swap out depending on the selection in a select menu.
It works if I include the code inline, but when I try to use ng-includes like this, I get an Angular error and the app fails:
<div ng-switch on="pFilter">
<div ng-include="'includes/parcel_details_incoming.html'" ng-switch-when="Incoming Parcels"></div>
<div ng-include="'includes/parcel_details_forward.html'" ng-switch-when="Exception Parcels"></div>
<div ng-include="'includes/parcel_details_exception.html'" ng-switch-default></div>
</div>
What am I doing wrong here? Does ng-switch not work with ng-includes?

The reason is both the directives ng-include and ng-switch-x use transclusion and you are specifying both on the same element and it is not allowed. Move nginclude to the child of ng-switch element.
<div ng-switch on="pFilter">
<div ng-switch-when="Incoming Parcels"><div ng-include="'includes/parcel_details_incoming.html'"></div></div>
<div ng-switch-when="Exception Parcels"><div ng-include="'includes/parcel_details_forward.html'"></div></div>
<div ng-switch-default><div ng-include="'includes/parcel_details_exception.html'"></div></div>
</div>
This used to work until angular 1.x version but compound transclusion will result in multidir error starting 1.2.x version of angular. Take a look at the change log and this commit.

AngularJS if statement with ng-repeat

I'm having trouble trying to use an if alongside a repeat statement.
I'm fetching data, as follows:
modules: Array[1]
0: Object
embed: "<iframe width="600" height="338" src="https://www.youtube.com/embed/UqdDAn4_iY0"
frameborder="0" allowfullscreen="" style="margin:0px auto;display:block;"></iframe>"
type: "embed"
1: Object
src: "https://m1.behance.net/rendition/modules/127899607/disp/072cebf2137c78359d66922ef9b96adb.jpg"
type: "image"
So, if the module has a type of image, i want to get the image. If it has type embed, i want to get the iframe. My current view code is:
<div ng-repeat="project in project.modules" ng-if="project.type == 'image'">
<img src="{{ project.src }}" class="img-responsive img-centered" alt="{{ project.name }}"/>
</div>
It works well if i take out ng-if. Console outputs the following error:
Error: Multiple directives [ngRepeat, ngIf] asking for transclusion on: <!-- ngRepeat: project in project.modules -->

You can use filter instead of using ngIf. Your code shall be like:
<div ng-repeat="project in project.modules | filter: { type: 'image' }">
And it shall work.
The solution you're trying to do in your code can't be done as ngIf and ngRepeat both trying to remove and replace some elements and do some transclusion.
Check this issue https://github.com/angular/angular.js/issues/4398
Also check the usage of filters https://docs.angularjs.org/tutorial/step_09
and this question shall be useful with using ngRepeat with filters ng-repeat :filter by single field

This is because you have to do the if condition inside the ng-repeat block. For example:
<label ng-repeat="elem in list">
<div ng-if="...">
show something for this condition
</div>
</label>
Why do you need the ng-if to be alongside the ng-repeat?

this should display only "article" and "article1" on screen
<li ng-repeat="value in values" ng-if="value.name == 'article' || value.name == 'article1'">
<label>{{value.name}}</label>

You can't use ng-repeat and ng-if on the same element, because both of them want to do things like remove & replace the entire element. This kind of makes sense - what would you do when ng-repeat is saying "hey draw this" but ng-if is saying "hey no don't draw this?"
I think the best solution here would be to preprocess your array to only include the records you want, and then ng-repeat over that with no ng-if. You could also move the ng-if to an element inside the ng-repeat element, so that there is no ambiguity about what's shown & hidden.