can you help me with the index in the nested ng-repeat ? I can't find the right way to take the first 8 element of prodata, then the 8 following elements, then the 8 following elements...etc.
<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="s in [0,1,2,3,4,5,6,7,8,9]">
<ul>
<li ng-repeat="item in prodata | limitTo:8*s+8:8*s+0">
{{s}}
<a class="suggestPro" href="#">
<span><img ng-src="img/boards/{{item.imageName}}" /></span>
<p class="flex-caption"> {{item.model}} - {{item.name}}</p>
</a>
</li>
</ul>
</ion-slide>
</ion-slide-box>
Check your angular version. The ability to specify the begin argument has been added to 1.4 version of angular :
Extract from angular's change log :
limitTo: extend the filter to take a beginning index argument (aaae3cc4, #5355, #10899)
Your code wil be :
<li ng-repeat="item in prodata | limitTo:8:8*s">
The best way IMO would be to reformat the initial array to make it suitable for usage with ng-repeat. Example:
var getSplittedArray = function (array, numberOfElements) {
var newArray = [];
for(var i = 0; i < array.length; i += 1) {
if (i % numberOfElements === 0) {
newArray.push([]);
}
newArray[newArray.length - 1].push(array[i]);
}
return newArray;
}
// Example: var realArray = someService.get();
$scope.splittedArray = getSplittedArray(realArray, 8);
Example usage in the view:
<ion-slide-box show-pager="true" does-continue="true" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="set in splittedArray">
<ul>
<li ng-repeat="item in set">
{{s}}
<a class="suggestPro" href="#">
<span><img ng-src="img/boards/{{item.imageName}}" /></span>
<p class="flex-caption"> {{item.model}} - {{item.name}}</p>
</a>
</li>
</ul>
</ion-slide>
</ion-slide-box>
Related
I'm having trouble accessing the artists array within the items array here to be able to render the name field:
I'm currently able to grab other values at the same level as the artists that are simple objects. How can I loop through the array of the nested array?
Controller
$scope.search = "";
$scope.listLimit = "10";
$scope.selectedSongs = [];
$scope.addItem = function(song){
$scope.selectedSongs.push(song);
}
function fetch() {
$http.get("https://api.spotify.com/v1/search?q=" + $scope.search + "&type=track&limit=50")
.then(function(response) {
console.log(response.data.tracks.items);
$scope.isTheDataLoaded = true;
$scope.details = response.data.tracks.items;
});
}
Template
<div class="col-md-4">
<div class="playlist">
<h3>Top 10 Playlist</h3>
<ul class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<li><b>{{song.name}}</b></li>
<li>{{song.artists.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
<div id="result"></div>
</div>
</div>
You should do another ng-repeat to access the artists,
<div class="songs" ng-repeat="song in selectedSongs track by $index | limitTo: listLimit">
<ul ng-repeat="artist in song.artists">
<li><b>{{song.name}}</b></li>
<li>{{artist.name}}</li>
<li contenteditable='true'>Click to add note</li>
<li contenteditable='true'>Click to add url for image</li>
</ul>
</div>
This is my controller
var i;
for (i = 1; i <= 3; i++ ) {
$scope["items"+i].push({
notification: item.notification,
admin_id: item.admin_id,
user_id: item.user_id,
chat_time: item.chat_time
})
}
This is my static scope in ng-repeat
<ul>
<li ng-repeat="x in items1"></li>
<li ng-repeat="x in items2"></li>
<li ng-repeat="x in items3"></li>
</ul>
How to make dynamic iteration scope variabel in ng-repeat in single ng-repeat like this
<ul>
<li ng-repeat="x in items[i++]">
<!-- generate from here-->
<li ng-repeat="x in items1"></li>
<li ng-repeat="x in items2"></li>
<li ng-repeat="x in items3"></li>
<!-- to here -->
</li>
</ul>
and it will display like my static scope
Thanks , appreciate ur help and comment
You need to store all the different arrays in a new Array and then, you can loop it around as shown (I have created a sample):
JS:
$scope.item1 = [ /* json array 1 */];
$scope.item2 = [ /* json array 2 */];
$scope.item3 = [ /* json array 3 */];
$scope.itemsList = [];
for (i = 0; i < 3; i++) {
var varName = '$scope.item' + (i + 1);
$scope.itemsList.push(eval(varName));
}
HTML:
<li ng-repeat="mainList in itemsList">
<p ng-repeat="specificList in mainList">
<span>Id: {{specificList.id}}</span>
<br />
<span>Name: {{specificList.name}}</span>
</p>
</li>
Have a look at the demo.
I have two array which is given below
$scope.base64Array=[null, null, "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQ…cmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=", null, null, null];
$scope.products=["Wheat", "LCD Monitor", "Ethernet Cable", "Optical Mouse", "Rice", "Mac Mini RAM 4 GB"];
Here I have an null value in base64array if it is null then no need to display image and if i have base64 string i need to display in that image row
and my ionic view looks like
<ul class="list">
<li class="item" ng-repeat="i in products" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/100x100">
</li>
</ul>
You can add a track by $index to the repeat so you can tell which index you are at then index into base64Array.
<ul class="list">
<li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]}}">
<img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100">
</li>
</ul>
Try process this two arrays before assignment, loop the base64Array, remove the null item and the same index item in products.
var tmp_base64Array = ["/9j/4AAQSkZJRgABAQAAAQABAAD..."];
var tmp_products = ["Ethernet Cable"];
After process the two arrays would be like this, then assignment to $scope.
edit:
$scope.products = [
{ "name": "Wheat", "imgUrl": null },
{ "name": "LCD Monitor", "imgUrl": "/9j/4AAQSkZJRgABA..." }
];
<ul class="list">
<li class="item" ng-repeat="product in products" ui-sref="leadProduct" >
{{product.name}}
<img ng-src="{{product.imgUrl || 'http://placehold.it/100x100'}}">
</li>
</ul>
I want to output a list of <li> elements using ng-repeat="obj in links", where links is an array of objects with href and text properties:
$scope.links = [
{ href: '/asdf', text: 'asdf'},
{ href: '/qwer', text: 'qwer'},
/* etc. */
{ href: '/zxcv', text: 'zxcv'}
];
But I want the ng-repeat loop to change what it does when it reaches a certain object in that array. Specifically, I want the loop to create hyperlinks for every object until obj.href==location.path() -- and after that, I just want to write out the text inside a <span>.
Currently, I'm solving this by creating both links and spans each time in the loop:
<ul>
<li ng-repeat="obj in links" ng-class="{active: location.path()==obj.href}">
<a ng-href="{{obj.href}}">{{obj.text}}</a>
<span>{{obj.text}}</span>
</li>
</ul>
plunkr
I then use CSS to hide all hyperlinks after the active class and hide all spans before it. But I don't want to just hide the links after the condition matches -- I want them to be completely removed from the DOM.
So there are two things you must do.
Find the index of the active element
Only show links up to the active index, and after that only show spans
What about this:
In your controller
$scope.lastIndex = 0;
$scope.$watch('links', function(newVal, oldVal){
for(var i=0; i< newVal.length; i++){
if (newVal[i].href == location.path()){
$scope.lastIndex = i
break;
}
}
}
In your HTML :
<ul>
<li ng-repeat="obj in links">
<a ng-if="$index <= {{lastIndex}}" ng-href="{{obj.href}}">{{obj.text}}</a>
<span ng-if="$index > {{lastIndex}}">{{obj.text}}</span>
</li>
</ul>
please see that example http://jsbin.com/cifef/1/edit
for your solution you need to replace $scope.location.href by location.path()
$scope.isLast = false;
$scope.getValue = function(obj)
{
if( obj.href==$location.path() || $scope.isLast )
{
$scope.isLast = true;
obj.isLast = true;
}
};
HTML:
<ul>
<li ng-repeat="obj in links" ng-class="{active: location.href==obj.href}" ng-init="getValue(obj)">
<a ng-href="{{obj.href}}" ng-hide="obj.isLast">{{obj.text}}</a>
<span ng-show="obj.isLast">{{obj.text}}</span>
</li>
</ul>
I'd like to access to the parameters of the next item on screen when clicking on a button.
I use a ng-repeat in my html file:
<li ng-repeat="item in items | filter:query" ng-show="isSelected($index)">
<img src="xxx.jpg" />
</li>
And the index in my Controller with a loop:
$scope.itemNext = function () {
$scope._Index = ($scope._Index < $scope.nbItems - 1) ? ++$scope._Index : 0;
$scope.functionToCallWithNextItem(nextItem.param1);
};
A simple $scope.items[$scope._Index].param1 instead of nextItem.param1 wouldn't work as the data is filtered so $index+1 from $scope.items isn't necessarily the good one.
Any idea ?
You can assign your filtered data to a variable:
<li ng-repeat="item in (filteredItems = (items | filter:query))">
Then use $index + 1 to get the next item:
<a ng-click="itemNext(filteredItems[$index + 1])">
Demo: http://plnkr.co/edit/OdL5rIxtTEHnQCC3g4LS?p=preview
It's simpy that
<div ng-repeat="item in items">
current: {{item.value}}
next: {{ items[$index + 1].value}}
previous: {{ items[$index - 1].value}}
</div>