I am having issue with $index in angular.I have a ng-repeat inside which I am using $index to keep track of unique class.
Here is my code:
<div ng-repeat="style in styleArr">
<div class="myclass{{ $index }}">
</div>
</div>
In angular controller I am appending a div inside myclass0,But not working.
Here is my controller.
myClass = angular.element('.myclass0');
myClass.append('<div class="test">Hello World..<test>');
When I try to do this:
<div ng-repeat="style in styleArr">
<div class="myclass0">
</div>
</div>
Its working fine.Any suggestion?
I think you want a unique classes for each div for applying a unique CSS. You can implement it by assigning a unique class or assigning a unique Id. For a Class, you need to use "ng-class" directive.
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>
For a unique Id use :
<div ng-repeat="style in styleArr">
<div id="style{{ $index }}">
</div>
</div>
Best option is to use unique Id for performing a operation. If you want to assign only a styles then use Unique classes.
Use ng-class, it allows for expressions in the class name
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>
More info on ng-class: https://docs.angularjs.org/api/ng/directive/ngClass
Use "ng-class" instead of "class"
<div ng-repeat="style in styleArr">
<div ng-class="myclass{{ $index }}">
</div>
</div>
you have to change class for ng-class
You can't do it reliably the what you are trying to do it. You need to understand how digest cycle and compilation/rendering of templates in Angular works. Then you would understand that element with class myclass0, myclass1, etc. - are not available at the time yo are trying to fetch them from DOM. Again - this is the reason why you should never do any DOM manipulations in controllers.
You should either use custom directive i your case or existing Angular directives like ngIf/ngShow, etc.
For example:
<div ng-repeat="style in styleArr">
<div class="myclass" ng-if="style.show">
<div>Hello ...</div>
</div>
</div>
and in controller
// show "Hello" in the first myclass
$scope.styles[0].show = true;
My advice would be not to have DOM manipulation inside controllers. That is what directive is used for. However in your case if you just want to append a div for the first iteration you can do something like this:
<div ng-repeat="style in styleArr">
<div ng-show="$first" class="test">Hello World..</div>
</div>
More on ng-repeat and $first
Related
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'"
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>
I'm new to AngularJS and having to work on an app that has a section of nested ngRepeats such as this below.
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="loadMoreOrdersToList()">Load More</button>
</div>
</div>
The status.Orders list can be quite large at times so I limit it. When a user wants to view more data for that specific section (which is enumerated by status) I add 3 to the orderFilterLimit. The problem is when I do this it is adding 3 to every single .order-list in the .inner-pannel element. Is there a way I can change the orderFilerLimit variable based on an id or class of the element it's attached to?
For context here is a super simple snippet of what loadMoreOrdersToList() is doing.
https://jsbin.com/vapucixesa/1/edit?js
No need of declare the orderFilterLimit inside controller, You should have scope variable inside ng-repeat itself so that it ng-repeat element will have separate copy of orderFilterLimit because ng-repeat create a child scope on each iteration.
Markup
<div class="title-bar" ng-repeat="orderType in someObj.orderTypes" ng-init="orderFilterLimit = 3">
<div class="inner-panel" ng-repeat="status in orderType.statuses">
<p>{{status.Name}}</p>
<div class="order-list" ng-repeat="order in status.Orders | limitTo:orderFilterLimit">
<p>{{order.Stuff}}</p>
</div>
<button ng-show="(status.Orders.length > orderFilterLimit)" ng-click="orderFilterLimit = orderFilterLimit + 3">Load More</button>
</div>
</div>
I am trying to apply the filters on the ng-repeat based on user selection in section options.But unable to do that so far.
Update-It works !!
Here's Plunker
HTML
<div class="container">
<div ng-include="" src="'refiners.html'"></div>
<br />
<br />
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="item in data.Results | filter:cc">
<div>
<p>{{item.Title}}</p>
<p>{{item.City}}</p>
<p>{{item.PostalCode}}</p>
<span>{{item.MinimumSalePrice | currency}}</span>
<span>{{item.MaximumSalePrice |currency}}</span>
<p>{{item.PropertyType}}</p>
<p>{{item.TenureType}}</p>
</div>
</li>
</ul>
</div>
When you do ng-include you create a new scope so cc is always empty in the parent scope.
This is similar to the issue in this in question. AngularJS - losing scope when using ng-include
You can fix it by adding $scope.cc={} to your controller (creating this element in the parent $scope so the filter has access to it. For this to work you will have to remove the ng-init calls from refiners.html, since these will create a new object in the child scope.
I have the following code:
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
then in itemG.html I have:
<img src="{{item.image}}">
How can I get my ng-repeat to print out all of the images?
There are 2 potential problems in the code...
src="itemG.html" needs an extra pair of single quotes like this:
<div ng-repeat="item in items">
<div ng-include="'itemG.html'"></div>
</div>
And the img tag is missing a closing ":
<img ng-src="{{item.image}}">
Plunker: http://plnkr.co/edit/7IUs7WPdUYkfVVKtBN1m?p=preview
Basically, what this comes down to is that the browser will interpret what inside the src attribute literally, until angular comes along to replace it. If you have a string constant, you can use single quotes inside the src="'myurl.html'", but if you have a value that needs to be bound by angular, you have to use ng-src and the expression syntax of {{ }}
You also need to bind a model to your template file itself. It's not going to pick up the bindings from your repeater without some help from either the ng-include event directives, or it's own model/controller/directive. There are too many different ways to demonstrate that, and it's also relevant on what markup is in your template file, which I can't say.
However, if the img tag is the only thing in that file, then instead of the file, I'd just do this:
<div ng-repeat="item in items">
<img ng-src="item.image" />
</div>
Since you're inside a repeat, it's already being included, making the ng-include redundant.
In principal code
<div ng-repeat="item in items">
<ng-include src="itemG.html" ng-controller="MyCtrl" ng-init="i=item"><ng-include>
</div>
then in itemG.html I have:
<img src="{{i.image}}">