As I can access a specific property it is a nested ng-repeat this is my code:
<div ng-repeat="item in list">
<div ng-repeat="(key, value) in item">
{{key}}:{{value}}
</div>
</div>
So far so good, I want to do is get the value of a particular property to another action
with that, that is a comparison to something more like this:
<div ng-repeat="item in list">
<div ng-repeat="(key, value) in item">
<div ng-if="key.myProperty==1">
//My Code
</div>
<div ng-if="key.miProperty==2">
//My Code
</div>
</div>
</div>
My object is:
$scope.list = [{id:1,name:"name1",age:"22"},{id:2,name:"name1",age:"25"},{id:2,name:"name1",age:"25"}];
I want to get the value of age.
Any suggestions.
IF you just simply need the age value in the repeat, then you do not need the inner repeat, all you need is
<div ng-repeat="item in list">
{{item.age}}
</div>
Unless I am missing something here, you can simply just do this. Here's a fiddle for you - http://jsfiddle.net/7MhLd/1298/
So unless you need this to build dynamically off the data, you would just do :
<div ng-repeat="item in list">
id: {{item.id}}
age: {{item.age}}
name: {{item.name}}
</div>
I'm not quite sure what you're trying to say with key.myProperty because as was mentioned, key is a string. If you want to check if the age is a certain value you can do something like.
<div ng-if="key === 'age' && value === '1'">
Related
I basically want to hide the header if there are no items in the loop:
<div class="header" ng-if="notifications.length">
<h3>Title</h3>
</div>
<div ng-repeat="item in notifications" ng-if="!item.read">Stuff</div>
Is it possible to do this inside the template?
Maybe not the most elegant way, but if you actually need it to be done inside template, you can use filter: https://docs.angularjs.org/api/ng/filter/filter
In your case it would be something like:
<div class="header" ng-if="(notifications | filter:read=false).length">
<h3>Title</h3>
</div>
Also, you can use filter in ng-repeat:
<div ng-repeat="item in notifications | filter:read=false">Stuff</div>
Also, you can define new array inside template, in parent of those div's. This will be probably most readable solution.
<div ng-init="unreadNotifications = (notifications | filter:read=false)">
<div class="header" ng-if="unreadNotifications.length">
<h3>Title</h3>
</div>
<div ng-repeat="item in unreadNotifications">Stuff</div>
</div>
Yes you use this inside the tempate
<ng-template [ngIf]="notifications.length">
<div class="header">
<h3>Title</h3>
</div>
....
</ng-template>
Lets say we have two ng-repeat (nested) in angularJS:
<div ng-repeat="animal of animals track by $index">
<div ng-repeat="name in names">
<p>{{$index}}</p>
</div>
</div>
In this example the $index would be the index of the child loop in names, but i want to have the index of the parent loop animals where i have the track by.
Why is this not working?
Try this.
<div ng-repeat="animal of animals track by $index">
<div ng-repeat="name in names">
<p>{{$parent.$index}}</p>
</div>
</div>
I want to access the index of dashboardCtrl.labels in dashboardCtrl.labelColors which is another array.I have tried the following but no success. If I print just {{$index}} it is getting printed successfully}}
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[{{$index}}]}}</label>
</div>
You don't need nested brackets {{ }}. Try this
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[$index]}}</label>
</div>
Do the following. Just $index in {{dashboardCtrl.labelColors[$index]}} instead of {{dashboardCtrl.labelColors[{{$index}}]}}
<div class="row" ng-repeat="i in dashboardCtrl.labels">
<div id="circle" style="background:green"></div>{{i}}
<label>{{dashboardCtrl.labelColors[$index]}}</label>
</div>
EDIT
Apply CSS style attribute dynamically in Angular JS
ng-style="{'background-color': dashboardCtrl.labelColors[$index]}"
My data structure is:
{"code":"AAA","name":"AAA industries","date":null}
I am trying to display just the name in a button. I am trying to use the following:
<div ng-repeat="item in company.details">
<button ng-repeat="(key, val) in item">
{{val}}
</button>
</div>
but of course that displays everything. What's my next step here?
use this
check for key, if it is equal to name then display else dont
<div ng-repeat="item in company.details">
<button ng-repeat="(key, val) in item">
<span ng-if="key=='name'">{{val}}</span>
</button>
</div>
Here is a jsBin illustrating an answer.
The code logic is as follows:
<body ng-app="MyApp" ng-controller="myController">
<div ng-repeat="item in data">
{{item.name}}
</div>
</body>
Kolban is correct. So in your case the answer would be:
<div ng-repeat="item in company.details">
{{item.val}}
</div>
ng-repeat="question in questions"
{{$index+1}}
ng-repeat="option in question.choiceBeanList"
{{questionObj.questionId}} --> Here I have to get both data's
My question is how to get data in the second ng-repeat like below for loop example given.
For example:
for(i=0;i<=10;i++)
{
for(j=0;j<=5;j++)
{
console.log(i+"_"+j)
}
}
You can use ngInit for this
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
check the docs: https://docs.angularjs.org/api/ng/directive/ngInit
If you're just trying to get at the index, you can use $parent.$index
Json model
$rootScope.makes = [
{
name: 'BMW',
models: ['335i', 'M3', 'M4']
},
{
name: 'Mercedes',
models: ['C250', 'E350']
}
];
Nested ng-repeats
<ul ng-repeat="make in makes">
<li ng-repeat="model in make.models">
({{$parent.$index}},{{$index}}): {{make.name}} {{model}}
</li>
</ul>
Working example
Try this:
<div ng-repeat="question in questions">
<div ng-repeat="option in question.choiceBeanList">
{{questions.indexOf(question)}} // To get the index value of FIRST ng-repeat
{{$index}} // To get the index value of current ng-repeat
</div>
</div>
Hope it helps...!
You can just pass outer ng-repeat data like this
<div ng-repeat="question in questions">
<div ng-repeat="option in question.choiceBeanList">
{{$parent.$index+1}}_{{$index}}
</div>
</div>