I have an angularjs app that loads in data from this JSON file:
http://www.football-data.org/alpha/soccerseasons/354/leagueTable?callback=JSON_CALLBACK
<tr ng-repeat="team in teamsList">
<td>{{$index + 1}}</td>
<td><a href="#/teams/{{team._links.team.href}}">
{{team.teamName}}
</a></td>
<td>{{team.playedGames}}</td>
<td>{{team.points}}</td>
<td>{{team.goals}}</td>
<td>{{team.goalsAgainst}}</td>
<td>{{team.goalDifference}}</td>
</tr>
However in this part of the code: <td><a href="#/teams/{{team._links.team.href}}"> which loads in URL eg. http://api.football-data.org/alpha/teams/61 I want to retrieve the last numbers at the end, they could be longer than 2 or less, instead of the whole URL. So anything after that last /, is there a way I could do this?
Looks like you want to write a filter like this one: Substring in Angularjs using filters?
If it's always two digits, you could get away with this:
<a href="#/teams/{{team._links.team.href|limitTo:-2}}">
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
Hi I have a situation in AngluarJS that the HTML is generated by back-end and the only thing that front-end should do is to put the HTML which is mostly table tags into the ng-bind-html and show it to the user. But now these tables should be sort-able too. How can I do it?
The thing that I've already done is to create my own directive using this so make the static string HTML take some actions too. But having them sorted is something else. In other word I want to make my fully generated table with all <tr> and <td> to get sorted by my actions.
Here is my simplified code (compile is my directive):
JS:
// The string is fully generated by back-end
$scope.data.html =
'<table> <tr> <th ng-click="sortByHeader($event)"> Name </th>
<th ng-click="sortByHeader($event)"> Age </th> </tr>
<tr> <td> Sara </td> <td> 15 </td> </tr>
<tr> <td> David </td> <td> 20 </td> </tr>'
HTML:
<div compile="data.html"></div>
The ng-click="sortByHeader($event) is something that back-end can prepare for me so I can use it thanks to the compile I wrote that let me find out which header has been clicked. Other than that there is nothing I can do. Unless you can help me :D
Thanks in advance, I hope my question was clear.
Since you tagged your question with sorttable.js I'm going to assume that you are using that script to sort your tables.
Now, if I understand it correctly, sorttable.js parses your HTML for any tables with the class sortable. Your table is apparently loaded dynamically, therefore sorttable.js does not know about it when it parses the HTML.
But you can tell it to make a dynamically added table sortable, too.
Relevant part taken from the following page:
https://kryogenix.org/code/browser/sorttable/#ajaxtables
Sorting a table added after page load
Once you've added a new table to the page at runtime (for example, by
doing an Ajax request to get the content, or by dynamically creating
it with JavaScript), get a reference to it (possibly with var
newTableObject = document.getElementById(idOfTheTableIJustAdded) or
similar), then do this:
sorttable.makeSortable(newTableObject);
You should be able to do that with angular. If not, I can try to put something together later.
Is the answer to the question "Does the rendered table have to exactly match the HTML retrieved by the backend?" a kind of "No"?
If that's the case, then here's a hacky way of gaining control of the table contents by parsing and capturing stuff from the backend HTML string using regular expressions.
For example: grab all row data and apply sorting client side
// Variables to be set by your sortByHeader functions in order to do client-side sorting
$scope.expression = null;
$scope.direction = null;
var regexToGetTableHead = /<table>\s*(.*<\/th>\s*<\/tr>)/g;
$scope.tableHead = regexToGetTableHead.exec($scope.data.html);
$scope.tableRows = [];
var regexToGetRowContents = /<tr>\s*<td>\s*(\w*)\s*<\/td>\s*<td>\s*(\w*)\s*<\/td>\s*<\/tr>/g;
var match;
while ((match = regexToGetRowContents.exec($scope.data.html)) != null) {
$scope.tableRows.push({
"name": match[1],
"age": match[2]
});
}
And HTML
<table>
<thead compile="tableHead"></thead>
<tbody>
<tr ng-repeat="row in tableRows | orderBy: expression : direction">
<td>{{row.name}}</td>
<td>{{row.age}}</td>
</tr>
</tbody>
</table>
What I want to do is to create 2 angular tables where I display tasks. In the first table I want to show all tasks which are not assigned to user and in the second tab I want to show all tasks which are assigned to user
UsersDTO is array, I may have more users assigned to the same task.
My html code looks like this. This is tab where I got all tasks with assigned user to it. I am not pretty sure why this is working, but I assume it somehow looks into property and check if there is anything.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Is there a way how to tell to filter in ng-repeat that UsersDTO is null or empty, something like in code below.
<tbody>
<tr ng-repeat="task in project.ProjectTasksDTO | filter: {UsersDTO: {null}}">
<td>{{task.Id}}</td>
<td>{{task.Title}}</td>
<td>{{task.Text}}</td>
<td>{{task.Description}}</td>
<td><p ng-repeat="user in task.UsersDTO">{{user.UserName}}</p></td>
<td>{{task.Status}}</td>
<td>{{task.CreatedBy}}</td>
<td><button class="btn-info" ng-click="editUser(user);">Profile</button></td>
</tr>
</tbody>
Hi you can do it this way without a the need for a function.
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:true">
<div ng-repeat="task in project.ProjectTasksDTO | filter:{UsersDTO.length: 0}:false">
Altough keep in mind that the :true and :false notation is actually an angular specific shorthand notation and will be replaced with function(actual,expected) in a literal comparison to see if these match yes:true or no:false
Fidle
I am displaying Errors on my Html page using Angular JS. The problem is I am receiving only error codes from the HTML . What are the various ways in which i can change the error code to the the Error text i like
<table>
<tr ng-repeat='item in errorsd'>
<td align="left" class="validationMsg"> {{item.message}}</td></tr>
</table>
If my item.message has one . I would like to display Beginner ,if its 2 Intermediate like that and so on . Should i use ng-if ? should i use ng-switch or should i input some logic on the controller side .
Should i use ng-if ?
ng-switch is more readable and hence a better option. Later when you look back at the code it will be intuitive to you and other developers about what this code does.
should i input some logic on the controller side .
Why put a logic in controller-side if the framework already provides a solution for such use-case?
I would do it like:
<table>
<tr ng-repeat='item in errorsd'>
<td ng-switch="item.message" align="left" class="validationMsg">
<span ng-switch-when="1">Beginner</span>
<span ng-switch-when="2">Intermediate</span>
<!-- and so on.. -->
</td>
</tr>
</table>
I say use a switch statement inside of your controller.
So depending on the value, the global message would change thus displaying the correct one when triggering the validation msg box to show.
I am trying to display string array in JSP page.
I have got a test String array in my controller set this to my registration model
String[] test={"ab","cb","sc","ad"};
registration.setTestArray(test);
Now I am trying to display it in jsp Its working fine if I do like this
<tr>
<c:forEach var="arr" items="${registration.testArray}">
<td>${arr} </td>
</c:forEach>
</tr>
But my problem is I want to display only some of the values from this array like 2nd and 4th index of this array.
I tried like
<tr>
<c:forEach var="arr" items="${registration.testArray}">
<td>${arr[2]} </td>
</c:forEach>
</tr>
but its throwing an error. This is just a test in my actual project I have long array of array from which I have to display some selected values.
I am thinking of doing this by first process my required values in controller and then display it in jsp. But I am not sure is this the best method. It would be great help if someone suggest me the better way.
It depends on how you get these "selected values". You can:
${registration.testArray[2]}
you can loop using a specific step of the c:forEach tag
you can loop everything and check <c:if test="${selectedValues.contains(arrItem)}