I am trying to add a class to the every last element in that row. Here I have a ng-repeat and showing it in three columns in a row so every 3rd(last) column should have a class. Though I am in the beginning stage of Angular I couldn't figure it out.
Thanks for your kind answers.
You could try to use $last (a exposed property of ng-repeat) and ng-class
<div class="container" ng-repeat="item in items">
<div ng-class="{'yourClass':$last}"> your content...</div>
</div>
I would have tried to provide a better example, but its hard to guess the structure of what you are working on based on your input.
Related
I wish to use ng-repeat tag for reading the product list in JSON.
Suppose if I have 10 products in JSON then it shall create 10 div boxes (Something similar to the e-commerce products page)
I am unable to create these div boxes via ng-repeat.
Can someone help me with any example ?
I wish to display something like this .
EDIT
I am not concerned about data here.
My question is that how can I add those rectangular div boxes as seen in the image attached in the question.
Supose in the controller you set a list of items to $scope.items, and every item has a name and a code.
<div ng-repeat="item in items">
<p>{{item.name}} - {{item.code}}<p>
</div>
I want to filter an array based on even and odd $index property and I want to add odd elements in a separate div and even elements in another div, I could easily do this in JavaScript or jQuery, but I wanted to know the correct way to implement the same in AngularJS.
This is what I've done so far:
<div ng-app>
<div ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
<div class="row" ng-repeat="name in names">
<div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div>
<div class="col-xs-6" >{{name}}</div>
</div>
</div>
</div>
It shows empty spaces in place of odd elements in first case, and when I add the odd expression for second div, the elements in the second div disappear and appear in first div. Here is the fiddle for the same issue.
Please advise.
EDIT:
I have got what I wanted, I split the main array into two different arrays odd and even array; this fiddle may be useful for people who stumble upon the same issue in the future.
Since Angular 1.2.0-rc1, ngRepeat exposes the $odd and $even properties on the local scope. You can simply use an ngSwitch based on one of this properties:
<div ng-repeat="item in itemsList" ng-switch="$even">
<div ng-switch-when="true">{{item}} is even</div>
<div ng-switch-default>{{item}} is odd</div>
</div>
Notice that if you just want to change the class based on the parity, ngClassOdd and ngClassEven are available since 1.0.0:
<div ng-repeat="item in itemsList" ng-class-even="'even'" ng-class-odd="'odd'">
{{item}}
</div>
All-in-one Fiddle
I think you're going to have some trouble with what you're looking to do, due to the way ng-repeat works. It generates a new scope for each iteration of the repeat. So you'll end up with two divs each time through the loop, one visible and one hidden.
To explain the weird behavior you've been seeing:
In your first case, the loop is alternating between showing two divs and showing one div. In a row that displays only one div, it understandably looks like a blank was inserted in the second column.
In the second case, the ng-repeat loop alternates between showing the first div and the second one. Without some CSS styling to show the difference, it looks like one div. You can make it pop by adding a style such as text-info to one of the divs.
I hope that explains what's going on behind the scenes, but the better question is... what are you trying to accomplish with the two divs?
Update: Since it looks like your goal is to take that array and pump it out into a 2-column layout, you can probably do away with your row div and your 2 column divs. Instead, try repeating a single 6-width column div. It'll handle the row wrapping for you every other column. You can use odd and even styling as #Blackhole pointed out if you want to differentiate the divs. I've got an example fiddle set up here that may be of use.
I wanted to create sortable tabs using uiSortable directive (https://github.com/angular-ui/ui-sortable) and tabs from AngularUI bootstrap (http://angular-ui.github.io/bootstrap/). Important thing for me is an ability to sort elements in model, by using ng-model. So, I added ui-sortable and ng-model="someArray" on element. It doesn't work that way, because tabset is being replaced with structure like that:
<div>
<ul>
<li>tab 1 header</li>
<li>tab 2 header</li>
<li>tab 3 header</li>
</ul>
<div class="tab-content"> tabs content </div>
</div>
and in effect, sortable is applied to outer div so I can grab ul and .tab-content when in fact I wanted to sort those li elements.
My first try on solving that problem was creating uiSortableTabs directive with compile function that adds ui-sortable attribute to ul (using just attr()). Good thing is that now tabs are sortable. Bad thing is that now sortable is not aware of model. I tried invoking .attr('ng-model',attrs.ngModel) on that ul together with adding that ui-sortable. Now sortable see the model, but it's undefined.
Does anyone know how to make sortable tabs with updatable model or how to correctly add directive to an element, together with ngModel using compile function in other directive?
I was working with a similar one, my solution is to use jQuery ui sortable directly and change the data model by hooking the start and stop event.
I have a list of DIVs that are generated by ng-repeat.
I need to apply an ng-class to those that're selected. To find out if the div is selected, I call to a model function ( not ng-model, just standard conceptual model ).
<div class="default" ng-class="{selected : myModel.isSelected({{item.id}})}" ng-repeat="item in items">
<!--Div content-->
</div>
This doesn't work, and none of the divs get the selected class.
However, when I call the model function from the inspector (myModel.isSelected(id)) for a specific id constant, I get "true".
Any ideas?
Thanks!
Currently I am using ng-repeat to show a division.
<div class="something" ng-repeat="item in items">{{item.name}}</div>
In my controller the moment I add one more item to items it shows in my page. But it just displays the new content. What I want is to show an effect while its added like the new div should slide down while being added to the page. How I can I achieve it?
Try adding a ngAnimate attribute with animation values. You can find more information here
http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#animating-ng-repeat