Is there a way to get the depth of a nesting ng-repeats? Say if you are iterating over an nested object of unknown depth like nested comments?
Since ng-repeat creates a new scope, you could do something like this.
{{$depth = $parent.$depth && $parent.$depth + 1 || 1}}
See https://jsfiddle.net/crgt25uk/ for a working example.
var app = angular.module('app',[]);
app.controller('ExampleController',function($scope){
$scope.items = [
{name:'foo',items:[{name:'foofoo'},{name:'foobar'}]},
{name:'bar',items:[{name:'barfoo'},{name:'barbar'}]}
]
})
And your template:
<div ng-app="app">
<div ng-controller="ExampleController">
<li ng-repeat="item in items">{{$depth = $parent.$depth && $parent.$depth + 1 || 1}}: {{item.name}}
<ul>
<li ng-repeat="item in item.items">{{$depth = $parent.$depth && $parent.$depth + 1 || 1}}: {{item.name}}</li>
</ul>
</li>
</div>
</div>
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.
This should be a really simple question.
Is it possible to get a property value dynamically like this:
<div tabset>
<div tab ng-repeat="item in teamController.range track by $index">
<div tab-heading>
<div class="selected-colour" ng-class="{ 'no-colour-selected': !controller.kit['colour' + $index + 1] }" ng-style="{ 'background-color' : '#' + controller.kit['colour' + $index + 1] }"></div> {{ controller.kit['colour' + $index + 1] }}
</div>
<div class="picker colour-picker">
<ul class="picker-dropdown list-inline">
<li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + $index + 1] === colour.hex }">
<a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour(controller.kit['colour' + $index + 1], colour)"></a>
</li>
</ul>
</div>
</div>
</div>
hopefully you can see that my model has 3 properties:
Colour1
Colour2
Colour3
And in my repeat I am trying to get each of them by doing
controller.kit['colour' + $index + 1]
Update
So I have changed my view to this:
<div tabset>
<div tab ng-repeat="item in teamController.range track by $index">
<div tab-heading>
<div class="selected-colour" ng-class="{ 'no-colour-selected': !controller.kit['colour' + ($index + 1)] }" ng-style="{ 'background-color' : '#' + controller.kit['colour' + ($index + 1)] }"></div> {{ controller.kit['colour' + ($index + 1)] }}
</div>
<div class="picker colour-picker">
<ul class="picker-dropdown list-inline">
<li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + ($index + 1)] === colour.hex }">
<a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour(controller.kit['colour' + ($parent.$index + 1)], colour)"></a>
</li>
</ul>
</div>
</div>
</div>
In my controller I have this:
// Set our colours
self.setColour = function (item, colour) {
// Set the colour
item = colour.hex;
console.log(item);
console.log(kit);
// Store our model in the session
configuratorService.saveToSession(kit);
};
It doesn't update the kit.
But if I change the setColour invocation to
teamController.setColour(controller.kit['colour' + ($parent.$index + 1)], colour)
and then change my controller function to this:
// Set our colours
self.setColour = function (item, colour) {
// Set the colour
item.colour1 = colour.hex;
console.log(item);
console.log(kit);
// Store our model in the session
configuratorService.saveToSession(kit);
};
everything works fine.
I have also tried using teamController.setColour(controller.kit['colour' + ($index + 1)], colour) and this didn't work.
Does anyone know why?
You need to wrap $index + 1 inside round brackets to evaluate it first before concatenating the string.
Additionally You need to use $parent notation while you wanted to access the $index of parent ng-repeat
ng-click="teamController.setColour(controller.kit['colour' + ($parent.$index + 1)], colour)"
This was a weird one to solve.
I had to change the way my function worked. I changed my function to this:
// Set our colours
self.setColour = function (propertyName, colour) {
// Set the colour
kit[propertyName] = colour.hex;
// Store our model in the session
configuratorService.saveToSession(kit);
};
and my HTML to this:
<div class="picker colour-picker">
<ul class="picker-dropdown list-inline">
<li ng-repeat="colour in teamController.colours" ng-class="{ 'active': controller.kit['colour' + ($index + 1)] === colour.hex }">
<a href style="background-color: #{{ colour.hex }};" ng-click="teamController.setColour('colour' + ($parent.$index + 1), colour)"></a>
</li>
</ul>
</div>
For some reason I found that if I tried to pass the actual property, although it updated the property it did not update all references (as if dynamic properties in views are always treated as copies). Doing it this new way fixed the problem.
I'm trying to build a list of people with dividers for each letter (similar to a phone's address book).
people = ['Angela','Annie','Bob','Chris'];
Result:
A
Angela
Annie
B
Bob
C
Chris
I want to do something similar to this pseudocode using Angular:
<div id="container" ng-init="lastCharacter = ''">
#foreach(person in people)
#if(firstCharacter(person.name) != lastCharacter)
<div class="divider-item">{{firstCharacter(person.name)}}</div>
{{lastCharacter = firstCharacter(person.name)}}
#endif
<div class="person-item">{{person.name}}</div>
#endforeach
</div>
What is the easiest way to achieve this? I couldn't come up with an elegant solution using ng-repeat.
You should create a custom filter and move the grouping logic inside that:
app.filter('groupByFirstLetter',function(){
return function(input){
var result = [];
for(var i = 0;i < input.length; i++){
var currentLetter = input[i][0]
var current = _.find(result, function(value){
return value.key == currentLetter;
});
if(!current){
current = {key: currentLetter, items: []}
result.push(current);
}
current.items.push(input[i]);
}
return result;
};
});
Then the view gets simple:
<div ng-repeat="personGroup in people | groupByFirstLetter">
<div class="divider-item">{{personGroup.key}}</div>
<div class="person-item" ng-repeat="person in personGroup.items">
{{person}}
</div>
</div>
Here's a little working example in plunker : http://plnkr.co/edit/W2qnTw0PVgcQWS6VbyM0?p=preview
It's working but it throws some exceptions, you will get the idea.
try (use sorted list)
<div id="container" ng-repeat="person in people">
<div class="divider-item"
ng-if="$index == 0 || ($index > 0 && firstCharacter(person.name) != firstCharacter(people[$index-1].name))">{{firstCharacter(person.name)}}</div>
<div class="person-item">{{person.name}}</div>
</div>
hope, you have firstCharacter function defined in scope. Or you can simpley use person.name.charAt(0).
edit: as this will contain id container for all person. so best would be using an inner div inside container and run ng-repeat on there
<div id="container" >
<div ng-repeat="person in people">
<div class="divider-item"
ng-if="$index == 0 || ($index > 0 && firstCharacter(person.name) != firstCharacter(people[$index-1].name))">{{firstCharacter(person.name)}}</div>
<div class="person-item">{{person.name}}</div>
</div>
</div>
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>