I'm attempting to use ng-repeat in a couple of elements on my page.
For some reason it's showing each of the n elements n times and I cannot figure out why.
My array looks something like this:
$scope.fieldNames = ["Last_Name","First_Name","Email","Home_Phone","Cell_Phone"];
I have a select box that is filling n^2 times (I have tried using ng-options but cannot get it to work with the array):
<td>
<select ng-model="currentField" style="width: 100%">
<option ng-repeat="field in fieldNames">{{field}}</option>
</select>
<td>
Additionally this happens with the header row of my table.
But not with the member rows or the cells contained within.
<table class = "main-table">
<thead>
<tr>
<th ng-repeat = "field in fieldNames">{{field}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "member in members" >
<td ng-repeat = "field in fieldNames">{{member[field]}}</td>
</tr>
</tbody>
</table>
If someone could please explain to me why this is happening and how to fix it I would be grateful. A working example of the ng-options would also be appreciated.
Thanks in advance for your time.
To work with a list of strings in ng-options, you need the comprehension expression looks like this
<select ng-model="currentField" ng-options="field for field in fieldNames"></select>
DEMO
So it turns out that the reason each item was repeating n times is that both my page and the layout template I was using both had
<script type = "text/javascript" src = https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
As a result angular was apparently loading twice and running the ng-repeat on the ng-repeat, hence all the additional entries.
Related
I can't get the 'groupBy' working.
I have a data set returned from a $http factory. The data is passed to the $scope 'territoryReq' variable.
the data set looks like:
[{"Country":"Netherlands","Name":"firstName lastName","Phone":"+12345678","Mobile":"+987654321"},{"Country":"Netherlands","Name":"firstName2 lastName2","Phone":"+12345678","Mobile":"+987654321"}]
I have a simple 'dump' of the data by using:
<div>
<table ng-table="" class="table table-condensed table-bordered table-hover">
<tr class="ng-table-group" ng-repeat="entries in territoryReq">
<td>
{{entries.Country}}
</td>
<td>
{{entries.Name}}
</td>
<td>
{{entries.Phone}}
</td>
<td>
{{entries.Mobile}}
</td>
</tr>
</table>
</div>
This is all working. No problem.
Now I want to have the results grouped by Country. Preferably by being able to click on the country which then unhides the rows with the correct country.
I was looking at the example of example of ng-table with grouping
But I can't get it working for my data..
In the example they use e.g. group in $groups but I can't figure out where $groups come from?
Anyway, I hope someone can help me in the right direction...
thanks!
For straight up grouping, groupBy takes an object property as the parameter. It should be as simple as
<tr class="ng-table-group" ng-repeat="entries in territoryReq | groupBy: 'Country'">
But it sounds more like you want to filter the list based on criteria, like country.
I mocked this up to demonstrate what I think you're looking for. Please take a look and see if it helps... It has ordering via the table headers and filtering from a dynamic list of countries.
https://stackblitz.com/edit/angularjs-yvxdrd
I have a view that manages school's tests in a period (trimester or semester). Each semester can have many tests of type normal but only one of type examen.
I have made a script in jsFiddle that shows the behavior I am looking for https://jsfiddle.net/dfLf9zkm/.
The difference is that in the ng-repeat I have a ng-controller over each test so every time I called the ng-method it only affects the row I am on and not the rest. Something like
<div ng-app="app" ng-controller="Controller">
<table>
<tr>
<th>Type</th>
<th>Ponderation</th>
</tr>
<tr ng-repeat="test in tests track by test.id" ng-controller="TestRow">
<td><select ng-model="test.type" ng-options="type.id as type.type disable when type.id == 2 && hasExam && idExam!=test.id for type in types" ng-change="checkTests()"></select>
</td>
<td>{{test.ponderation}}%</td>
</tr>
</table>
</div>
If I change the value of $scope.hasExam with a method inside TestRow controller it only affect that row and not the rest. How can I do it?
I finally decided to leave everything in one controller and that fixed everything up
I am getting array from two get method in angular 5. What i want is to combine those two arrays (JSON) into one array and print it in a single for loop
my two arrays:-
servers3 =[
{
sub:'sub',
subDesc:'subDesc'
}];
public tableData:any;
i am using concat two combine two arrays like follows
<table>
<tr>
<th>fileName</th>
<th>icon</th>
<th>fullPath</th>
<th>sub</th>
<th>subDesc</th>
<th>image</th>
</tr>
<tr *ngFor="let item of tableData.concat(servers3)">
<td>{{item?.fileName}}</td>
<td>{{item?.icon}} </td>
<td>{{item?.fullPath}}</td>
<td>{{item?.sub}}</td>
<td>{{item?.subDesc}}</td>
<td><img src="{{item?.fullPath}}" width="200px" height="200px" alt="adawdawd"/></td>
</tr>
</table>
</div>
And i am getting output as follows:-
as you can see its not showing in one line
each array completes individually
please give me solution if any one know the answer
thank you in advance
You can use following keeping in mind that length of both the arrays should be same otherwise it will generate error.
this.tableData.map((item, index) => {
return Object.assign(item, servers3[index]));
});
HTML
...
<tr *ngFor="let item of tableData">
...
I have two filters, one for pagination and one for a search query. It searches first, then paginates on the result.
Here is the html:
<table class="table table-striped">
<tbody>
<tr ng-repeat="pot in (filteredPots = (pots | search:potQuery | paginate:currentPageNumber.pots:itemsPerPage))">
...
</tr>
</tbody>
</table>
<pagination ng-model="currentPageNumber.pots" ng-change="paging(pots)" items-per-page="{{itemsPerPage}}" total-items="filteredPots.length" class="pagination-sm"></pagination>
From what I understand this is working correctly (I can add {{ filteredPots.length }} and it shows the value 10).
What I am trying to do is have the total-items value as the total array length (i.e. without the pagination which limits it to itemsPerPage).
Any help is greatly appreciated, thanks!
Figured it out... took a lot of trial and error.
Html is updated to:
<table class="table table-striped">
<tbody>
<tr ng-repeat="pot in (filteredPots = (searchedPots = (pots| search:potQuery) | paginate:currentPageNumber.games:itemsPerPage))">
...
</tr>
</tbody>
</table>
<pagination ng-model="currentPageNumber.pots" ng-change="paging(pots)" items-per-page="{{itemsPerPage}}" total-items="searchedPots.length" class="pagination-sm"></pagination>
What's changed? Instead of filtering the array pots with two seperated filters, I'm filtering the array pots on the filter search:potQuery and saving the resulting array as searchedPots, then the second filter uses searchedPots as the array, and saves that result as filteredPots (which isn't used).
I then have the length of the searched pots BEFORE pagination as searchedPots.
While replacing legacy javascript with angularjs code, I'm stuck with the following use case (simplified code as follows):
<tr ng-repeat="section in page.sections>
<td>{{section.name}}:</td>
</tr>
<tr ng-repeat="task in section.tasks>
<td>{{task.name}}:</td>
</tr>
The expected result should be a single table, with task rows should follow parent section row.
I understand that the inner loop won't work because of the scope of the section element is not the parent of the inner loop.
Is there a work around (or a best suitable way) to perform this?
The following should work:
<tr ng-repeat-start="section in page.sections">
<td>{{section.name}}:</td>
</tr>
<tr ng-repeat="task in section.tasks">
<td>{{task.name}}:</td>
</tr>
<tr ng-if="false" ng-repeat-end><td>end</td></tr>
See a demo plunkr