I have something like this:
<div ng-repeat="atma in abc">
<li ng-repeat="atma in abc.slice(0,3)"><span>{{$index+1}} - {{atma.weapon}} </span></li>
</div>
I wanted to slice these results at, each div repeat, each time being used the 3 items from index.
So I would start with the first div showing the weapons ranging from 1 to 3.
The second one would have elements from 4 to 6.
And so on.
Can I use $index or something like that on my slice?
Ps.: This question came from trying my best on this question here.
I'm still having some trouble, but I made another question based on what I could do with slice.
1st:
<div ng-repeat="atma in data">
<ul ng-if="$index % 3 == 0">
<li><span>{{data[$index]}} </span>
</li>
<li ng-if="$index+ 1 < data.length"><span>{{data[$index+1]}} </span>
</li>
<li ng-if="$index+ 2 < data.length"><span>{{data[$index+2]}} </span>
</li>
</ul>
</div>
2nd:
<div ng-repeat="atma in data">
<ul ng-if="$index % 3 == 0" ng-init="tmp = data.slice($index, $index + 3)">
<li ng-repeat="atma1 in tmp"><span>{{atma1}}</span>
</li>
</ul>
</div>
http://plnkr.co/edit/Uo1ROo549swNorzixTi3?p=preview
Related
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I have a small thing I hang up on.
I have this markup
<div class="menu-build-group"> <!-- Level 1 -->
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1</span>
</div>
</div>
</div>
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
<div class="menu-item-relative-wrap">
<div class="menu-build-item">
<div class="menu-item-handle">
<span class="menu-item-number">1.1</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
<li class="menu-build-item-wrapper">...</li>
</ul>
</div>
I am trying to change the menu-item-number just for the first level.
I used this code witch I know is not working in my case.
function changeSectionNumbers(triggerEl){
var sectionMenuGr = triggerEl.closest('.menu-build-group');
sectionMenuGr.find('.menu-build-item-wrapper').each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
})
}
Is there any way I can get only the first level of elements "menu-build-item-wrapper" and change the menu-item-number text?
Try this:
<ul class="root-list menu-build-items">
<li class="menu-build-item-wrapper">Level 1 Level 1 Level 1
<div class="menu-keypress">
<div class="menu-build-group">
<ul class="menu-build-items">
<li class="menu-build-item-wrapper">Level 2 Level 2 Level 2
Please note the root-list class added to the first ul element
$("ul.root-list > li.menu-build-item-wrapper").each(function(index){
var myIndex = index+1;
$(this).find('.menu-item-number').text(myIndex);
});
you could wrap the outer most ul in a div eg
<div class="allitems">...</div>
Then you can use the the direct descendant operator: >
$(".allitems >
.menu-build-items >
.menu-build-item-wrapper >
.menu-item-relative-wrap >
.menu-build-item >
.menu-item-handle >
span");
Get the first level item by using below selector
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)")
Below loop to change text.
var count=1;
$(".menu-build-group .menu-build-item-wrapper .menu-item-number:eq(0)").
each( function( ) {
this.innerHTML=count;count++;
});
I have three unordered lists with list items inside, each containing a score from 1 to 10. I have pagination, so I have three identical ul items in the page.
I need a button that when clicked, orders the list items by descending number (so from 10 to 1).
the html is:
<ul class="pagination">
<li class="first active">1</li>
<li class="second">2</li>
<li class="third">3</li>
</ul>
<ul class="sort">
<li class="sortEm">sort by score</li>
</ul>
<div class="block" style="display:block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">10</div>
</li>
<li class="one_review">score:
<div class="score">7</div>
</li>
<li class="one_review">score:
<div class="score">9</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
</ul>
</div>
<div class="block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">1</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">3</div>
</li>
<li class="one_review">score:
<div class="score">7</div>
</li>
<li class="one_review">score:
<div class="score">9</div>
</li>
</ul>
</div>
<div class="block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">10</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">1</div>
</li>
<li class="one_review">score:
<div class="score">5</div>
</li>
</ul>
</div>
and the js is
$(".pagination li").click(function () {
$(this).toggleClass("active").siblings().removeClass("active");
$(".block").hide();
$(".block").eq($(this).index()).show()
});
$(".sortEm").click(function () {
function sortEm(a, b) {
return parseInt($(".score", a).text()) < parseInt($(".score", b).text()) ? 1 : -1;
}
$("li.one_review").sort(sortEm).prependTo($(".reviews_list"));
});
the problem is that using this function, when i click the button, i lose the pagination. here's a fiddle: http://jsfiddle.net/3ed03xy9/2/
How do I write the javascript in order for it to move the li items from block to block, maintain the pagination and display them from 10 to 1? I'm not a js expert, so this is something I have no idea how to do. I came this far for now.. can anyone help? thanks a lot :)
You can change the code that insert sorted list to
//store sorted list in variable so we can iterate over it and divide it
//this list combine all '.one_review' (li)s in the 3 reviews_list (ul)s
var sortedList = $("li.one_review").sort(sortEm);
// i iteration variable to let us know where we are in sortedList iteration
// we will increase it every iteration throgh sortedList elements
var i = 0;
// j iteration variable to point to Nth of ul.reviews_list (we have 3 ul.reviews_list)
// we will increase it when i=0, i=5 and i=10
var j = -1;
// the number of items per page (here the sortedList length is 15 and we wanna dived it to 3 pages )
// 15/3 = 5 then round it
var itemsPerPage = Math.round(sortedList.length / 3);
// iterate over each item in sortedList array
// https://api.jquery.com/each/
sortedList.each(function(){
//if reminder of Nth of element / itemsPerPage equal zero that mean
//we need to move to next ul.reviews_list empty it.
if( i % itemsPerPage == 0 ){
//move to next ul.reviews_list
// we will enter here 3 times:
// in first iteration when i=0 then 0%5 = 0 then j will be 0
// in 6th iteration when i=5 then 5%5 = 0 then j will be 1
// in 11th iteration when i=10 then 10%5 = 0 then j will be 2
++j;
// empty current ul.reviews_list
// see : https://api.jquery.com/eq-selector/
// see : http://api.jquery.com/html/
$('.reviews_list:eq('+j+')').html("");
}
// append current li.one_review(this) to current ul.reviews_list (:eq(j))
$('.reviews_list:eq('+j+')').append(this);
++i;
});
http://jsfiddle.net/3ed03xy9/5/
I am using AngularJS and its ng-repeat directive to display a sequence of questions. I need to number each question starting with 1. How do I display and increment such a counter with ng-repeat? Here is what I have so far:
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Angularjs documentation is full of examples, you just need to take some time and explore it.
See this example here : ngRepeat example , it's the same case.
<ul>
<li ng-repeat="question in questions | filter: {questionTypesId: questionType, selected: true}">
<div>
<span class="name">
{{$index + 1}} {{ question.questionText }}
</span>
</div>
<ul>
<li ng-repeat="answer in question.answers">
<span class="name">
{{answer.selector}}. {{ answer.answerText }}
</span>
</li>
</ul>
</li>
</ul>
Reached here by searching for something similar.
Here is what worked for me.
{{$index + 1}}
+1 is added because the index starts from 0.
There are two ways to get an index for the given array in ng-repeat
Using $index
<th ng-repeat="n in [].constructor(3 + 1) track by $index">{{$index}}</th>
Using a counter
This method is useful when you have nested ng-repeat and you need counters for both loops...the following example uses counter row. Although track by $index is required, it is not used for the logic.
<tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
<td>{{row+1}}</td>
In both cases counter starts with 0 and you can offset using +1 if you like
I have a list of items. An item can be a number of things, let's say the list is something like so :
[userObject , vehicleObject , userObject , animalObject , animalObject]
Now I want to render the list with ngRepeat directive that will use a template according to the type of the object (Polymorphic rendering). can this be done?
maybe something like (ng-use is an hypothetically directive):
<ul>
<li ng-repeat="item in items">
<img ng-use="item.type == 'user'" ng-src="item.src">
<a ng-use="item.type == 'vehicle'">{{item.link}}</a>
<span ng-use="item.type == 'animal'">{{item.name}}</span>
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-switch="item.type">
<img ng-switch-when="user" ng-src="item.src">
<a ng-switch-when="vehicle">{{item.link}}</a>
<span ng-switch-when="animal">{{item.name}}</span>
</li>
</ul>
API reference:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Although this doesn't use ng-switch, it does get round the problem of not having a type field, which #DotNetHaggis pointed out.
<div ng-repeat="field in fields">
<div ng-if="field.user !== undefined">user info</div>
<div ng-if="field.vehicle !== undefined">vehicle info</div>
<div ng-if="field.animal !== undefined">animal info</div>
</div>