<div (ng-repeat='item in items') >
{{item.name}} //works
{{item["name"]}} // works
</div>
how do i repeat item[property] dynamically without using ".name" or ['name']?
To dynamically go through properties, you're going to need to call Object.keys(item) and then iterate through them. It's best to prune your data from within your controller, to minimize the finagling you'll need to do within your HTML.
If you do want to try to do this within your HTML-Angular structures, you could define:
$scope.returnAllKeyValues = function(obj){
var x = Object.keys(obj),
arr = [];
for(var i = 0; i<x.length; i++){
arr.push(obj[x[i]]);
}
return arr;
}
What this function does is it takes in your JSON object, then parses through it and collects all the values for every key within it.
Then, within your HTML, you can write something like this:
<h3>FIFA Mactch Summary:</h3>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in items">
<span ng-init="keyValues = returnAllKeyValues(item)">
<span ng-repeat="keyValue in keyValues">{{key}} </span>
</span>
</li>
</ul>
</div>
Here you see, within your original ngRepeat, we initialized the array keyValues with all the values from item's keys via the function defined above. Then, ng-repeat through that, and you have everything printed without knowing what they are.
Here is a Fiddle with it working:
http://jsfiddle.net/RkykR/2771/
This was what i was looking for....Thanks
https://www.codementor.io/debugging/4948713248/request-want-to-use-values-in-nested-ng-repeat
Related
I'm starting at front-end development and there´s something that I don't know if it's possible to do using AngularJS and ng-repeat.
I have an array with 3 levels of data so the first ng-repeat lists the level 1, inside it there's another ng-repeat that lists the level 2 anda at last another one that lists level 3. Something like this:
<div ng-repeat="item-1 in level-1">
<div ng-repeat="item-2 in level-2">
<div ng-repeat="item-3 in level-3">
{{item-3.name}} : {{item-3.valid}}
</div>
</div>
</div>
What I wan't to know if it´s possible to use the ng-if directive on the first level repeat but with a condition of the tird level repeat, something like this:
<div ng-repeat="item-1 in level-1" ng-if="item-3.valid == true">
<div ng-repeat="item-2 in level-2">
<div ng-repeat="item-3 in level-3">
{{item-3.name}} : {{item-3.valid}}
</div>
</div>
</div>
Thank you!
What about moving this logic to the controller managing this HTML. For example something like:
$scope.toBeDisplayedItems = [..];
$scope.level1 = [..];
$scope.level2 = [..];
$scope.level3 = [..];
for (var item1 in $scope.level1) {
for (var item2 in $scope.level2) {
for (var item3 in $scope.level3) {
// do something with $scope.level1[item1] $scope.level2[item2] $scope.level3[item3]
// then fill the candidate array to be used in the HTML
$scope.toBeDisplayedItems.push(....);
}
}
}
In your HTML:
<div ng-repeat="item in toBeDisplayedItems">
{{item.name}} : {{item.valid}}
</div>
By the way I didn't get your check on item-3 in top level of first loop, is that actually working?
Anyway I answered you on the way it's done and not on the how.
Hey I have array of numbers, I am writing them using ng-repeat. When you click on some number should be pass to function passParameterToService parameter index and should be saved in service to variable this.whichBoard. But I have do something wrong, can someone tell me why ng-repeat don't work when I add service and why after click on some number, it's dont write to a variable?
demo
https://codepen.io/Turqus/pen/WXEryN
In your service you were declaring this.whichBoard but inside the function you again used the same named variable. If you set this.board inside, it would probably work:
app.service('serwis', ()=> {
this.whichBoard = (index) => {
this.board = index;
};
});
Also in the calling method, you have:
<a href="#" ng-click="passParameterToService($index)">
<span ng-repeat="item in arrayIndex">{{item}}</span>
</a>
You're passing $index, which isn't a value. Also, you have the repeat inside the method call, so change it to:
<div ng-repeat="item in arrayIndex track by $index">
{{item}}
</div>
I have a list of posts with comments. I need to traverse through array of comments inside each of the posts on my page. I'm trying to create variable inside ngRepeat for posts which I can use like an indexer to display exact comment for each post. Due to ngRepeat creating nested scope, this variable must be unique for each iteration. But when I'm trying to change it with ng-click, it doesn't change.
My ngRepeat:
<div class="question_block col-xs-12"
ng-repeat="answer in question.content.answer track by answer.id">
is followed by <span style="display:none">{{counter=0}}</span>. And then I'm showing some items like <span>{{answer.comments[counter].user.organization.title}}</span>. When I'm trying to do something like <a href ng-click="counter++">Increment</a> nothing happens. What's the matter ?
Use ng-init="counter = 0" and attach your ng-click to a function in your controller:
<div ng-repeat="item in items track by $index" ng-init="counter=0">
{{item}} ({{counter}})
<button ng-click="clickHandler()">Increment</button>
<hr />
</div>
Then, to increment counter in the context of the event, use this.counter
$scope.clickHandler = function() {
this.counter++;
};
Plunker demo : http://plnkr.co/edit/J4d0JlJSKD7i4OfMT2r4?p=preview
I am new to AngularJS and i dont know is it possible to delete all scope variables of a controller.I am using ng-controller with ng-repeat, like this.
<div ng-controller="main">
<div ng-repeat="x in list" ng-controller="test">
<input type="text" ng-model="text">
<span ng-click="remove($index)"> x </span>
<div>
</div>
JS
myapp.controller('main',function($scope){
$scope.list=[1,2,3,4]
})
myapp.controller('test',function($scope){
$scope.text="untitiled"
})
I want to remove the clicked scope.Can anyone help me or please suggest me a better way. Thanks
The question isn't very clear, but it looks like you may want to remove the item after clicking. Since you are passing into the remove function the index, you can splice it out. The DOM will autoupdate and remove that from the list:
$scope.remove = function(i) {
$scope.list.splice(i,1);
console.log($scope.list);
}
In the event you are doing something different in that you only want to hide it, you would push the index onto another array and then use something like ng-show or ng-hide.
$scope.remove2 = function(i) {
$scope.hideList.push(i);
}
$scope.shouldHide = function(i) {
return $scope.hideList.indexOf(i)!=-1;
}
<div ng-repeat="number in list2" >
{{number}}
<span ng-hide='shouldHide($index)' ng-click="remove2($index)"> x </span>
</div>
Here is a simple example of both scenarios. In real life, usually we are dealing with arrays of objects and what you might be doing is setting a property on one of the objects to hidden and controlling it that way.
Demo: http://plnkr.co/edit/G7UINKUCBJ4yZhQNtuJ2?p=info
If you actually want to remove all the keys from the scope:
function removeKeys() {
for(key in $scope) {
if (key.substr(0,1)!='$' && key!='this')
delete $scope[key];
}
}
I am having an array in controller as follows
function FooController($scope) {
$scope.items = ["a","b","c"];
}
I used ng-repeat to show the data in items,
<div ng-app>
<div ng-controller="FooController">
<ul ng-repeat="item in items">
<li>{{item}}</li>
</ul>
</div>
</div>
I got the result as a,b,c order. I want to show it in reverse order. that means c,b,a without changing its order in the controller or without creating a filter. How to do that?
Check this link
I faced the same problem, but with an array of objects. This quick solution worked for me, but using the filter is still the best practice.
<li data-ng-repeat="item in data.slice().reverse()">
...
</li>
http://bootply.com/SgVBZvZ708
In order to avoid the writting of a custom filter, I suggest you to use this syntax :
<ul ng-repeat="item in items | orderBy:'-toString()'">
The documentation assume you sort an array of Objects but in your case there are just plain strings.
Wrap the strings in objects and use orderBy or create a new filter:
angular.module("app",[])
.filter("reverse", function(){
return function(items){
return items.slice().reverse(); // Create a copy of the array and reverse the order of the items
};
});
And use it like this:
<ul ng-repeat="item in items|reverse">
Updated fiddle (I've also updated the ng-app directive so it's passed the "app" module.)