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
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
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
I want to repeat this code for each element in my array:
<div class="container" ng-init="parentIndex = $index" ng-repeat="urn in apsocket.mensajes | filter:searchTextURN">
<button style="width:100%" type="button" class="btn btn-info" data-toggle="collapse" data-target="{{'#urn_'+$index}}">{{urn.urn }}</button>
<div id="{{'urn_'+$index}}" class="collapse">
{{urn.timestamp}}
<br>
<p>
<div align="right" ng-repeat="meas in urn.measurements track by $index">
<button style="width:90%;background-color: #68ec6a;border-color:#8bf48c;" type="button" class="btn btn-success" data-toggle="collapse" data-target="{{'#meas_'+parentIndex + '_' +$index}}">{{meas.phenomenon}} </button>
<div style="width:90%" id="{{'meas_'+parentIndex + '_' +$index}}" class="collapse">
{{meas.value + ' ' + meas.uom}}
</div>
</div>
</p>
</div>
</div>
But, while first button in each row works fine and creates a working collapsible, the inner ng-repeats seem not.
Each inner element in each outter row, have the same id. So, for each "container", parentIndex is the same and starts in 0.
What should I do in this case? This is not a fixed array which I load at the beggining. This array recevies data from socket and it get bigger each time a message is received.
If you need any more code or so, just ask.
I would recommend just using the pure angular way. In a repeat, each item has it's own scope so you can do an ng-click="collapse = ! collapse" (something like that), I made you an example here
http://jsfiddle.net/X8era/82/
I just made a fake data structure for examples sake
<ul>
<li ng-repeat="item in objs" ng-click="collapse = ! collapse">
{{item.id}}
<ul ng-show="item.more.length > 0 && collapse">
<li ng-repeat="child in item.more" ng-click="collapse = ! collapse; $event.stopPropagation();" >
{{child.id}}
<ul ng-show="child.more.length > 0 && collapse">
<li ng-repeat="baby in child.more">
{{baby.id}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you would like to use the collapse class for an animation or whatever, you can change the part of the ng-show that is collapse to
ng-class="{ 'collapse' : collapse }"
The first 'collapse' being whatever class you want to be toggled.
You don't have to use ng-init="parentIndex = $index". You can access to parent $index like this $parent.$index.
Each ng-repeat creates new scope, that's why you can access to parent by using $parent keyword.
Demo:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
$scope.items = [0, 1, 2, 3, 4];
});
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items track by $index">
<ul>
<li ng-repeat="item in items track by $index">
parent: {{$parent.$index}}
current: {{$index}}
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="" ng-init="names=['james', 'sean', 'emmanuel']">
<div class="container">
<h2>Angular ng-repeat demo</h2>
<ul class="list-inline" ng-repeat="name in names">
<li> {{ name }} </li>
</ul>
</div>
I'm new to angular and bootstrap. The code above does not place the names on a single line. Any suggestion?
ps: list-line is a bootstrap css class
Use ng-repeat on the li element not the ul:
<div class="container">
<h2>Angular ng-repeat demo</h2>
<ul class="list-inline">
<li ng-repeat="name in names"> {{ name }} </li>
</ul>
</div>
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post