I have a angular controller that defines an array of elements as follows:
$scope.tasks = [{val=1},{val=2},{val=3},{val=4},{val=5},{val=6},{val=7},{val=8},{val=9},{val=10}];
I want to generate a series of elements for this and I can do this as follows:
<div ng-repeat-"button in tasks">
<button id = {{ $index}} value='{{task.val}}'></button>
</div>
However, I want the buttons to appear in two rows - like 1-5 in first row and 6-10 in the 2nd row. I think I have to use $index for this, but now sure how to do it.
Can someone help?
You can do it like that
<div ng-repeat-"button in tasks">
<button id = {{$index}} value='{{button.val}}'></button><br ng-if="$index == 5">
</div>
It would be better to show it in a table...
Divide the array into a 2D array with required no. of cols...
var tempArry = angular.copy($scope.tasks);
var cols = 5; //in your case 5
while (tempArry.length > 0)
$scope.DisplayArray.push(tempArry.splice(0, cols));
and the html...
<table>
<tr ng-repeat="row in DisplayArray track by $index">
<td ng-repeat="col in row track by $index">
<button value='{{col.val}}'></button>
</td>
</tr>
</table>
Related
I am using ng-repeat in my jsp to loop and display the values.if i have the value more then one time in the list i need to display only once.
Display the value only if the current value in the loop is not same as the previous value in jsp using ng- repeat
please find my code:
<td>
// obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm> </div>
</td>
// obj.dm is value. all the values should be displayed
<td> <div obj.dm> </div>
</td>
</tr>
<tr ng-repeat="obj in selItem.surveyRefData">
<td nowrap> // need to display ob.vm only if the current value is not same as previous value
<div style="float: left;" class="form-actions" obj.vm">
</div>
</td>
<td>
<div style="float: left;" class="form-actions"
ng-bind-html="(!validSeriesIdReqPending ?(obj.dm | seriesText):'')">
</div>
<br/>
<br/>
<tr ng-repeat="obj in selItem.surveyRefData|unique: obj">
<td> // obj.vm is name. name should be displayed only if it is diferrent then the previous name. otherwise it should be blank
<div obj.vm>
</div> </td> // obj.dm is value. all the values should be displayed
<td>
<div obj.dm> </div>
</td>
</tr>
The ideal solution is to preprocess the data and group it by the vm attribute, so you would have some structure like this:
name1
value1
value2
value3
name2
value4
value5
name3
value5
...
Then you would have a nested ng-repeat that loops over the values within each name. If, for some reason, you can't preprocess the data, you can refer to the previous item in your ng-repeat using the $index variable. Here is a simple example:
<tr ng-repeat="obj in selItem.surveyRefData">
<td>{{obj.vm !== selItem.surveyRefData[$index-1].vm ? obj.vm : ''}}</td>
<td>{{obj.dm}}</td>
</tr>
Keep in mind that this will only work if your data is ordered based on the vm attribute... if you had name1 -> name1 -> name2 -> name1, for example, you would see name1 twice in your output table.
Here is a simple example plunker: https://plnkr.co/edit/r5yxYk4Rr7mXaBeqoJNs
I can calculate sum of property in ng-repeat list like this:
<table ng-init="total=0">
<tr ng-repeat="item in items">
<td ng-init="$parent.total = $parent.total + item.Amount">
{{item.Amount}}
</td>
</tr>
</table>
However this does not work, when items are filtered: ng-repeat="item in items | filter: search"
The reason is, that <table> element is initialized only once, while <tr> each time the list is filtered. Because of that, the sum is not set to 0 when filtering is applied.
Is there some event/directive, which is called when filtering is applied? I use this "calculate totals" functionality very often and wish to avoid writing calculateTotals() function several times in my controllers and directives.
I'm trying to do a table (with a lot of data) with Angular, the table is already done with PHP but to add a filter is easier using Angular. PHP takes 10secs to draw the entire table of 11k rows, but Angular keeps going on and on, even Firefox tells me that a script is unasnwered. If I click continue, the message is shown again, if I click cancel the page does nothing, if I press debug it continues running but nothing is shown.
At first, I thought that drawing +11k rows in HTML with the ng-repeat was too much and that was causing the problem, so I added a limitTo (50) and also added a infinite scroll div. But it's still not showing anything and keeps on loading.
Here is some code:
<div ng-app='mainApp'>
<div ng-init='values=[".$angularString."]' ng-controller='seeTickets as tickets'>
<div infinite-scroll='tickets.loadMore()' infinite-scroll-distance='1'>
Filtro: <input type='text' ng-model='globalSearch.$'/><br><br>
<script type='text/javascript'>
var app = angular.module('mainApp', []);
app.controller('seeTickets', function(){
this.totalDisplayed = 50;
this.loadMore = function(){
this.totalDisplayed += 50;
}
});
</script>
<table>
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed">
<td> {{value.id_ticket}} </td>
<td> {{value.ticket_date}} </td>
<td> {{value.ticket_subject}} </td>
<td> {{value.ticket_from}} </td>
<td> {{value.ticket_to}} </td>
<td> {{value.ticket_priority}} </td>
</tr>
</table>
</div>
</div>
</div>
Am I doing something wrong? Is there a way to work this out? Why it's keep on loading even if I set limitTo?
Add track by $index to ng-repeat like this:
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed track by $index">
...
</tr>
I am converting MVC to AngularJS. I have a model passed to the View and I take the model and used LINQ to group into set of 4 items.
So, if I have 12 records, I will get 3 sets of 4 records. Reason. I am insert 4 records per row in a table. Here is the MVC code
#foreach (var productGroup in ((Model.Select((e, i) => new { Product = e, Grouping = (i / 4) }).GroupBy(e => e.Grouping))
{
<tr>
#foreach (var product in productGroup)
{
<td>
<div><br /></div>
<img src=#product.Product.Thumbnail style="width: 200px; height: 200px" />
<div><br /></div>
<div class="col-md-6">
<p><strong>#product.Product.DescriptionLine1<br></strong></p>
<p><small>#product.Product.DescriptionLine2<br></small></p>
</div>
</td>
}
</tr>
}
So far in AngularJS, I converted the code to
<tr ng-repeat="item in listItems">
<td>
<img ng-src="{{item.thumbnail}}" style="width: 100px; height: 100px"/>
<div><br/>
</div>
<div small>
<span ng-bind="item.descriptionLine1"></span><br/>
<span ng-bind="item.descriptionLine2"></span><br>
<br>
</div>
</td>
</tr>
How do I use LINQ to group into sets of 4 for listItems? If I can't use LINQ, how else can I perform the grouping? Thanks.
Here is a small example which displays 4 records per row.However please note there can be also better approach and am sure experts would enlighten that.
I have assumed you have $scope.items = ['a', 'b', 'c', 'd','e','f','g','k','k','l','k']; for simplicity as I don't know the real structure.You can modify accordingly.
Now you can use angular $index to limit 4 records each row like this.This way you break on 4th record each time on loop.
<div ng-repeat="_ in items">
<span ng-show="($parent.$index % 4 == 0) && ($parent.$index + 4 > $index) && ($parent.$index <= $index)" ng-repeat="item in items">
<span ng-show="1">
{{item}}
</span>
</span>
</div>
Here is a jsFiddle example on same.
How I can I automatically select the last row in a table
ng-repeat="unit in selectedOrder.products" using something like select by track by $index == desc or alternatively ng-options
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
<div class="search" ng-show="selectedOrder">
<table class="table table-bordered">
<tr><th>Item</th><th>Name</th><th>ValueToday</th></tr>
<tr ng-repeat="unit in selectedOrder.products" ng-if="$last">
<td><img ng- src="http:images/thumbnails/{{unit.shortname}}_tn.jpg" width=40 height=40
alt="{{ unit.shortname | limitTo: 18}} Photo"></td>
<td>{{unit.name | limitTo:18 }}</td>
<td>{{unit.valuetoday| currency:"£"}} </td>
</tr>
</table>
will give you only the last row selected
In ng-repeat you can use the $last special variable to apply something only if it's the last element. see: https://docs.angularjs.org/api/ng/directive/ngRepeat
you can use it as a condition for anything you want to do in the tag. like
<img class="{{$last ? 'selected'}}" ng-class="{'selected': $last}" ng-if="$last" ....>
or however you like (these are just examples)
Always keep in mind though that using angular means that you have to edit your model to apply changes to your view, so if you want to have an element selected you have to do something to your model so that the element contains a value that makes it selected and then your view should reflect this.
For example in your controller you can check which element is the last in your ng-repeat array and add a selected variable, then in your view do something to make it look like your element is selected (for example: ng-class="{'selected': element.selected}") otherwise, by working on the view only you can make it look like the element is selected using $last but it won't be really selected in your model
In fact In ng-options (so we are talking about a select) you have to change your model in order to reflect your choice. So for example if your select has an attribute like this: ng-model="selected" then in your controller you set the $scope.selected variable to the last element of the array containing the values for your ng-options
You could use something like ng-if="$index == $last"