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>
Related
I'm trying to wrap an element in an ng-repeat loop if the item has specific values.
eg:
items={
{name:"AAA",cat:"1"},
{name:"BBB",cat:"2"},
{name:"CCC",cat:"1"},
{name:"DDD",cat:"3"}
}
...
<div ng-repeat="item in items">
{{item.name}}
</div>
will output:
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
<div>DDD</div>
Let's say I want to wrap items that have category=1.
required output:
<div class="wrapper">
<div>AAA</div>
</div>
<div>BBB</div>
<div class="wrapper">
<div>CCC</div>
</div>
<div>DDD</div>
Note that I already have a filter and an orderBy in my ng-repeat, so can't use that.
Any advice how to achieve that?
Many thanks
Edit: I can't use a class, I need a wrapper div.
It can be done just by using ng-class as follows-
function MainCtrl($scope) {
$scope.items=[
{name:"AAA",cat:"1"},
{name:"BBB",cat:"2"},
{name:"CCC",cat:"1"},
{name:"DDD",cat:"3"}
]
}
.wrapper {
background-color : #ccc;
width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainCtrl as main">
<ul>
<div ng-repeat="item in items">
<div class="wrapper" ng-if="item.cat == 1">
{{item.name}}
</div>
<div ng-if="item.cat != 1">
{{item.name}}
</div>
</ul>
</div>
EDITS:
According to your edited Question this is best of my knowledge. Its implemented in above snippet.
<div ng-repeat="item in items">
<div class="wrapper" ng-if="item.cat == 1">
{{item.name}}
</div>
<div ng-if="item.cat != 1">
{{item.name}}
</div>
Note: if you dont want to use Class it can be done using id
<div ng-repeat="item in items" ng-class="{'wrapper' : item.category == 1}">
{{item.name}}
</div>
You don't need an extra div
I have the following code, I want to add 1 to the current index of the second Name, because if I don't, it will output the same name in a single line. How do I add to the current index of ngRepeat?
<ul id="speakerlist" ng-repeat="data in result">
<li>
<div class="col">
<h3>{{data.Name}}</h3>
</div >
<div class="col">
<h3>{{data.Name | $index+1}}</h3>
</div>
</li>
</ul>
I solved this by using jQuery, but I want to do it in angularjs way.
EDIT: additional info
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"Michael Jordan"},{"Name":"Kobe Bryant"},{"Name":"Kevin Durant"},{"Name":"Stephen Curry"} ];
});
The result I want Is:
Michael Jordan Kobe Bryant
Kevin Durant Stephen Curry
If I understand correctly, you want to display a li for every two items. You can do it something like this:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col">
<h3>{{result[$index].Name}}</h3>
</div >
<div class="col">
<h3>{{result[$index + 1].Name}}</h3>
</div>
</li>
</ul>
Of course you would also have to include some kind of check if the $index can reach the last one (if the collection has an un-even amount of items)
See this jsfiddle
You could even remove the double col html if you don't like duplicate html code:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col"
ng-repeat="item in [result[$index], result[$index + 1]]">
<h3>{{item.Name}}</h3>
</div >
</li>
</ul>
Try this code <h3>{{data.Name }} {{$index+1}}</h3> instead of your code
<h3>{{data.Name | $index+1}}</h3>
The result format looks like
Ramesh
Ramesh1
Rajendran
Rajendran1
I think you can make it simple this way.
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"hari"},{"Name":"ram"} ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul id="speakerlist" ng-repeat="data in result track by $index">
<li>
<div class="col">
<h3 >{{data.Name}} {{data.Name+1 }}</h3>
</div >
</li>
</ul>
</body>
">
Why don't you do this ?
<ul id="speakerlist" >
<li ng-repeat="data in result">
<div class="col">
<h3>{{data.Name}}</h3>
</div >
</li>
</ul>
This way you don't need to change de $index, it will be automatic
Sample problem
<div ng-app="" ng-init="names=['Jani']">
<ul>
<li ng-repeat="x in names " >
<div ng:model="a[$index]" >
<div ng:init="a{{$index}}='1'">
{{a0}}
</div>
</div>
</li>
</ul>
</div>
In above code, I can create dynamic ngModel variable. but I want to initiate value 1 to ngModel dynamically. Please help me
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'">
I currently have two rows with 2 SPAN on each one.
What I'd like to do is replace these hardcoded DIV and SPAN with an ng-repeat directive.
My problem is either my 4 SPAN go over 4 rows or they all go on the same one.
Is this feasible with Angular.js?
I read stuff on ng-repeat-start and ng-repeat-end but I'm not sure this could help me here.
Here's a Plunker for you: http://plnkr.co/edit/DEf2JSTFDBvDXusJDsX7?p=preview
Thanks!
EDIT:
I used SPAN in my Plunker example for the sake of simplicity but in my real world problem, I'm using a bootstrap grid and I have, in fact, 2 <div class="col-xs-12 col-md-3"> in each <div class="row">. I hope that clarifies things enough.
Very simple with bootstrap:
<div class="row">
<div class="col-xs-6" ng-repeat="i in [1,2,3,4]">
{{i}}
</div>
</div>
You can even set the width of the wrapper div, if you do not want it to be 100%.
Plunker: http://plnkr.co/edit/J0bKs0BeGW7ltqtnQbNC?p=preview
It is better to use $even and $odd property of ng-repeat.
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$odd">
</span>
</div>
OR,
<div class="row">
<span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
<br ng-if="$index%2===1">
</span>
</div>
Not nice but works
<div class="row" ng-repeat="i in [1,2,3,4]" ng-if="$even"><span>{{i}}</span><span>{{i+1}}</span></div>
Solution depends on what u want achieve
Another option is to organize your data not in flat array but as array of arrays
[
[1,2],
[3,4],
[5],
]
And make ng-repeat in ng-repeat
<div class="row" ng-repeat="i in myArray">
<span ng-repeat="j in i">{{j}}</span>
</div>
If your html looks like:
<div class="row">
<div class="col-md-3 col-xs-12">
<span>1</span>
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-3 col-xs-12">
<span>3</span>
<span>4</span>
</div>
</div>
Then you can consider doing this with ng-repeat[no <br> needed]
<div class="row">
<div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
<span >{{i}}</span>
<span >{{i+1}}</span>
</div>
</div>
Hope it solves your purpose.