I inherited a web app built in ASP.NET which returns a table of query results which pull from a database. Right now, all fields display as text, with the exception of the "Url" column which is a hyperlink (as seen in below code). What code would I add if I wanted to also suppress the display of one of the columns returned (or just not return it at all if that makes more sense)?
EDIT - additional information: the table columns are not pre-defined anywhere in the source code. The app has the ability for you to define a database and table from which to pull the results of your query - therefore the resulting table is dynamic. This is why it seems it has to be done in the HTML code of the page itself.
Below is the HTML code for the table:
<div class="row" ng-if="loading || results != null">
<div class="col-lg-2" ng-show="facets">
<div class="widget">
<div class="widget-title">
<i class="fa fa-check-square-o"></i> Facets
</div>
<div class="widget-body xlarge no-padding">
<pre>{{ facets | json }}</pre>
</div>
</div>
</div>
<div ng-class="{ 'col-lg-10': facets != null, 'col-lg-12': facets == null }">
<div class="widget">
<div class="widget-title">
<i class="fa fa-bars"></i> Results <span>({{ count }} results)</span>
</div>
<div class="widget-body xlarge no-padding">
<div class="message" ng-if="!loading && (results == null || results.length == 0)">
<div class="alert alert-warning">The query did not return any results.</div>
</div>
<div class="table-responsive" ng-if="!loading && results != null && results.length > 0">
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="field in fields">
{{field}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in results">
<td ng-repeat="field in fields">
<div ng-if="field == 'Url'">
{{ result.DirectSourceUrl }}
</div>
<div ng-if="field !== 'Url'">
{{ result[field] }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
I am not a .NET expert but i do know angular so if i get your question right, just ignore the field you wanna delete and don't bind it in the html or you could do something like this in angular controller right after the results are returned response.data.fieldName=undefined; (fieldName is the name off the column you wanna delete.
Hope it helped you.
Related
I am trying to build a shopping web app as a project for my master degree.
So my problem is that when I click the button to add a category(calling the function addCategory in my .ts file) I don't know how to create a div and add it to the html file with the id of the category's name, from the .ts file.
Any help it's welcomed.
<div class="container">
<div class="row">
<div class="col-6">
<h1>Products</h1>
<button (click)="addCategory()">Add category</button>
<div id="Products">
</div>
</div>
<div class="col-6">
<h1>Shopping basket</h1>
<div id="Shoppingbasket">
<table id="Productstable" class="table table-bordered">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
<th scope="col">Units</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="Productstablebody">
</tbody>
</table>
</div>
</div>
</div>
</div>
I'd suggest looking at the Tour of Heroes tutorial on the Angular web site to learn more.
You can create a list in your component, call it categories, then add more categories when you click the addCategory button. In your html template, you can loop through the categories and create an element for each of them.
I created a minimal example in a Stackblitz. Below is a rough example of how it can be done
Angular component
categories: string[] = [];
addCategory() {
this.categories.push('category');
}
HTML template
<div *ngFor="let category of categories">
{{category}}
</div>
make an array of category;
when you click add category add to the array then loop it in html like these
<div *ngFor="let category of categories" [id]="category.name">
</div>
<td ng-repeat="course in student.extracourses">
<div ng-if="!course"> not selected </div>
{{b.note}}
</td>
I have a table with some static columns and dynamic columns with respect to student extracourses. Some students do have extra notes and some do not. How can I show in the table 'not selected' if the 'course' does not exist? I tried this code above and it did not print 'not selected' for those who do not have a course
You can use <div ng-if="course === undefined"> to check whether course is set or not:
<td ng-repeat="course in student.extracourses">
<div ng-if="course === undefined">not selected</div>
{{b.note}}
</td>
Or alternatively, check the typeof():
typeof(course) === "undefined"
i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.
<table>
<thead></thead>
<tbody>
<tr>
<td><marquee>
<h3>
A tag is a keyword or label that categorizes your question with
other, similar questions. Using the right tags makes it easier
for others to find and answer your question.
</h4>
</marquee>
<hr></td>
</tr>
<tr ng-repeat="(key,value) in tagForm.data track by $index">
<td align="left">
<div ng-init='tagForm.getTag(key)'
class=" w3-container w3-card w3-white w3-margin w3-round "
style="padding-left: 40px; padding-right: 40px;">
<br>
<p ng-repeat="data2 in tagForm.message track by $index">
<a ng-click="tagForm.getAnswer(key)">Q. {{value}}</a> <span
class="badge">{{data2}}</span> <br>
</p>
<ul ng-repeat="(key2,value2) in tagForm.ans track by $index">
<li><b ng-if="key==key2">Ans. {{value2}}</b></li>
</ul>
<div ng-init='tagForm.getUser(key)'>
<b>Posted
by:{{tagForm.user2[$index]}}</b>
</div>
<button class="btn btn-default" id="{{$index}}"
ng-click="count1=count1+1" ng-init="count1=5+($index*3)-5">
Upvote <span class="badge">{{count1}}</span>
</button>
<button class="btn btn-default" id="{{$index}}"
ng-click="count=count+1" ng-init="count=1+($index*2)">
Downvote<span class="badge">{{count}}</span>
</button>
<button class="btn btn-default" ng-click="gotoanswer()">Answer
this question</button>
<br> <br />
</div> <br>
</td>
<td height=100px><br /></td>
</tr>
</tbody>
</table>
use the following pagination in your html file
<uib-pagination ng-show="isPaginate == false "
total-items="totalItems" ng-model="currentPage"
boundary-links="true" items-per-page="numPerPage"
class="pagination-sm" ng-change="pageChanged()" max-size="5">
</uib-pagination>
and then initialize the variable as per requirement in angular controller
$scope.totalItems = 80;//length of records
$scope.currentPage = 1;
$scope.numPerPage = 10;
var startpos = 0;
for dynamically loading records (loading records batch wise instead of loading all at time) refer following function
$scope.pageChanged = function() {
// if($scope.currentPage!=1)
$scope.isCollapsed = false;
$scope.isRCollapsed = false;
$scope.page = ($scope.currentPage - 1) * $scope.numPerPage;
callApi($scope.page);//get next set of 10 records
console.log('Page changed to: ' + $scope.currentPage);
};
Am using grid to diplay data from my data base. I would display grids in a table of 3 columns inthis way :
I try this code
<table style="width:70%" ng-repeat="e in events" >
<tr>
<td>
<div class="col-md-3 ticket-grid" >
<div class="tickets">
<div class="grid-right">
<font color="red"><h3>{{e.name}}</h3></font>
Location: {{e.loc}}<br>
Category: Sport <br>
Start date: <br>
End date:
Description: <span>{{e.description}}</span> <br>
Contact: {{e.contact}}<br>
Confirm
Refuse
</div>
<div class="clearfix"> </div>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
PS: events is an array that contains my data.
But i get this result
Any help please
You need to add the ng-repeat to the element you want repeated. In your version you are creating new <table> with all contents for each record in events. Moving it to the <td> will leave you with same issue as it will just create a new row for each record.
If you are using bootstrap - you should just use the grid system instead of the <table> for layouts, something like.
<div ng-repeat="e in events">
<div class="col-md-4 ticket-grid" >
<div class="tickets">
<div class="grid-right">
<font color="red"><h3>{{e.name}}</h3></font>
Location: {{e.loc}}<br>
Category: Sport <br>
Start date: <br>
End date:
Description: <span>{{e.description}}</span> <br>
Contact: {{e.contact}}<br>
Confirm
Refuse
</div>
<div class="clearfix"> </div>
</div>
</div>
You will need something like, to break out of the ng-repeat loop every 3 records:
<div class="clearfix" ng-if="$index % 3 == 0"></div>
See Plunker examples for more of an idea here
MY TEMPLATE
<div class="row">
<div class="col-lg-9">
<table class="table table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Publication date</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{% for questionnaire in questionnaires %}
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name="questionnaires" id="questionnaires" value="{{ questionnaire.id }}">
<label><b><a href="" >{{ questionnaire.name }}</a></b></label>
</div>
</td>
<td>{{ questionnaire.pub_date }}</td>
<td>Delete</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-lg-3">
<div class="sidebar-nav-fixed pull-right">
<div class="well">
<ul class="nav ">
<li>
Add new
</li>
<li>
Export to PDF
</li>
<li>
Check results
</li>
<li>
Draw charts
</li>
<li>
Generate tokens
</li>
<li>
Clear results
</li>
<li>
Delete selected
</li>
</ul>
</div>
</div>
</div>
I need to get all checked objects from checkboxes placed in table, and pass them to hyperlinks in navbar.
For example, I have hyperlink "Delete selected". I want to delete every questionnaire which is selected by clicking on that link. Is it possible? If yes how can I do that?
In order to achieve, 'I have hyperlink "Delete selected". I want to delete every questionnaire which is selected by clicking on that link.', it's going to require a mix of jQuery and Django.
You should attach a click listener on the 'Delete selected' button which should serialize all selected questionnaires and send that data via AJAX to a Django view which will delete the necessary questionnaire objects from the database.
Here is a rough example...
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').click(function() {
$.post('url/to/django/view', $('input[name=questionnaires]').serialize(), function(data, textStatus, jqXHR) {
// DO STUFF VIA THIS CALLBACK
});
});
});
</script>
def url/to/django/view(self, request):
if request.method == 'POST':
questionnaires_to_delete = request.POST.getlist('questionnaires')
Questionnaire.objects.filter(id__in=questionnaires_to_delete).delete()
return HttpResponse('WHATEVER YOU WANT TO RETURN TO THE CLIENT')
You many run into CSRF issues depending on your setup. Here is the documentation for handling that...
https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/