Using ng-repeat I want to use ng-model and ng-show to subjectively select an area to expand for the purpose of updating pet, place or points. Right now, it shows for all p in Pets within ng-repeat but I only want it to show for the single p's update button that is clicked. Extra points if you can show me how to close it when the update button is clicked again. Here is my html with Angularjs directives:
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody filter-list="search"ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="show()">Update</button>
<br>
<div ng-show="showing">
<input placeholder= "Pets" ng-model="Pets"/>
<br>
<input placeholder= "Places" ng-model="Places"/>
<br>
<input placeholder= "Points" ng-model="Points"/>
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
The show(); function
$scope.show = function() {
console.log("show")
$scope.showing = true;
}
Sometimes, going back to basics works the best. Since we know each iteration in ng-repeat creates a new scope, in order to avoid using the inherited show function, a simple showing != showing should work (even though it's undefined by default, it's fine since that's a falsy value, but you can always initialize it as well).
See it here:
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.Pets = [
{pet: 1, place: 1, points: 1},
{pet: 2, place: 2, points: 2},
{pet: 3, place: 3, points: 3}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="showing = !showing">Update</button>
<br>
<div ng-show="showing">
<input placeholder="Pets" ng-model="Pets" />
<br>
<input placeholder="Places" ng-model="Places" />
<br>
<input placeholder="Points" ng-model="Points" />
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
If you don't like this approach and want to use one common function (there are reasons you'd do that, but I don't see them in your example), you can use ng-repeat indices, and then do something like:
$scope.show = function(i) {
console.log("showing " + i)
$scope.showing[i] = true;
}
And simply invoke it like this:
<button ng-click="show($index)">Update</button>
and control the visibility like this:
<div ng-show="showing[$index]">
See it here:
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.showing = [];
$scope.Pets = [
{pet: 1, place: 1, points: 1},
{pet: 2, place: 2, points: 2},
{pet: 3, place: 3, points: 3}
];
$scope.toggle = function(i) {
console.log("show")
$scope.showing[i] = !$scope.showing[i];
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<table>
<thead>
<tr>
<th colspan="1" class="text-center">
Pets, Places and Points
</th>
<th colspan="1" class="text-center">
Update
</th>
<tr>
<thead>
<tbody ng-repeat="p in Pets">
<tr>
<td class="col-xs-6 col-sm-6 col-md-6 col-xl-6 merchant">
{{p.pet}}, {{p.place}} and {{p.points}}
</td>
<td class="col-xs-4 col-sm-4 col-md-4 col-xl-4 update">
<button ng-click="toggle($index)">Update</button>
<br>
<div ng-show="showing[$index]">
<input placeholder="Pets" ng-model="Pets" />
<br>
<input placeholder="Places" ng-model="Places" />
<br>
<input placeholder="Points" ng-model="Points" />
<br>
<button ng-click="Update(Pets, Places, Points)">Enter</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Related
Good day
Currently I am returning an array of objects looking like:
{
attendeeCount: 5
bookDay: "2018-11-22T14:06:24.120Z"
bookingComment: "This is a test"
conferenceRoom: {id: 8, name: "Main Boardroom", seatingCount: 10, location: "Site Office", projector: "YES"}
employee: {id: 111, title: "Mr.", initials: "J", preferredName: "John", lastName: "Smith", …}
id: 1
refreshment: {id: 1, name: "Coffee, Tea and Water"}
timeSlot: "07:00 - 07:30"
}
The requirement then is that I should be able to render the PrimeNG data table using TypeScript like the below:
public getRoomRosterTable() {
this.conferenceRoomBookingService.getRoomRoster(this.dateValue, this.selectedConferenceRoom.id).subscribe(response => {
console.warn(response);
this.conferenceRoomBookings = response;
}, error1 => {
this.alertService.error(error1);
});
this.timeSlotCols = [
{field: 'timeSlot', header: 'Time Slot'},
{field: 'employee.preferredName' + 'employee.lastName', header: 'Slot Booked By'},
{field: 'attendeeCount', header: 'Attendee Count'},
{field: 'refreshment.name', header: 'Refreshment Details'},
{field: 'bookingComment', header: 'Booking Comment'}
];
}
Combined with html looking like:
<p-table [value]="conferenceRoomBookings" [reorderableColumns]="true" [columns]="timeSlotCols">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
<div style="text-align:center">
{{col.header}}
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
This however only renders the columns that have direct data bound. I cannot seem to get the table to pick up properties of nested objects.
Is the above possible currently with PrimeNG, or do I need to create a custom DTO on the server returning only 'direct' fields for the PrimeNG table?
Could not get this to work with the PrimeNG table and resorted to using *ngFor combined with *ngIf wrapped in divs to detect nulls:
<table class="table-bordered">
<thead>
<tr>
<th>
<div style="align-content: center">
Time Slot
</div>
</th>
<th>
<div style="align-content: center">
Booked By
</div>
</th>
<th>
<div style="align-content: center">
Attendee Count
</div>
</th>
<th>
<div style="align-content: center">
Refreshment Requirement
</div>
</th>
<th>
<div style="align-content: center">
Booking Details
</div>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let conferenceRoomBooking of conferenceRoomBookings">
<td>
<div *ngIf="conferenceRoomBooking.timeSlot">
{{conferenceRoomBooking.timeSlot}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.employee">
{{conferenceRoomBooking.employee.preferredName}} {{conferenceRoomBooking.employee.lastName}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.attendeeCount">
{{conferenceRoomBooking.attendeeCount}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.refreshment">
{{conferenceRoomBooking.refreshment.name}}
</div>
</td>
<td>
<div *ngIf="conferenceRoomBooking.bookingComment">
{{conferenceRoomBooking.bookingComment}}
</div>
</td>
</tr>
</tbody>
</table>
I have a page coded in Handlebars and I am fetching the data as json from nodejs. I am trying to render a button which is a third party button. When I don't use DataTables() then the buttons are correctly render and clicking them opens a third party login window for further processing.
However, when I enable DataTables, only the first page is correctly rendered and the buttons work, but it does not work for other pages when the number of elements exceed 10. I am not sure if this is an issue with DataTables or how the third party button is expected to behave, but I am suspecting that when I switch pages in DataTables, the parameters the button expects while rendering are not correctly sent. I am new to DataTables.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> <span> <kite-button href="#" data-kite="secret_key"
data-exchange="NSE"
data-tradingsymbol="{{this.ticker}}"
data-transaction_type="BUY"
data-quantity="1"
data-order_type="MARKET">Buy {{this.ticker}} stock</kite-button> </span></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"}]
});
});</script>
</html>
How to modify this - most probably custom rendering of the button as each row is displayed?
EDIT
I am trying to modify the DataTable by custom rendering the button each time - but its not working.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> {{this.ticker}} </td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"},
{
targets: -1,
searchable: false,
orderable: false,
render: function(data, type, full, meta){
if(type === 'display'){
data = '<kite-button href="#" data-kite="scret" data-exchange="NSE" data-tradingsymbol=' + data + 'data-quantity="1" data-order_type="MARKET">Buy '+ data + 'stock</kite-button>';
}
return data;
}
]
});
});</script>
</html>
I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();
Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>
<body ng-controller="testeCtrl">
<img src="http://adsim.co/wp-content/uploads/2015/11/adsim_logo_cores_2x.png" alt="#" class="logo">
<div class="jumbotron barraPrincipal" ng-app="teste">
<div class="table-responsive">
<table class="table">
<tr ng-repeat="i in getNumber(number) track by $index">
<th>
<select class="logo form-control" ng-model="refrigerante" ng-options="refrige as (refrige.nome+' '+refrige.quantidade) for refrige in refri">
<option value="">
<h4>Selecione o refrigerante</h4></option>
</select>
</th>
<th>
<input class="form-control" type="number" min="1" placeholder="Informe a quantidade" ng-model="quantidade"></input>
</th>
<th>
<h4>Valor Unitário: {{refrigerante.preco | currency:'R$' }}</h4>
</th>
<th>
<h4 ng-show="refrigerante != null && quantidade > 0 && quantidade != 0" ng-model="i.fields[$index].item_count" name="item_count">Valor dos produtos: {{va = quantidade*refrigerante.preco | currency:'R$'}} </h4></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- total value of refrigerante.preco*quantidade here -->
<td>Valor total <span> </span></td>
</tr>
</table>
</div>
</div>
</div>
</body>
If you want to sum something, ng-repeat will probably not help. You can define a filter or call a function on the scope like this in the html: {{calculateSum()}}
https://docs.angularjs.org/api/ng/filter/filter
First, you have a lot of semantic errors in your HTML, one of them is in the <input> tag. It's a self-closing tag, so you don't need close it. Also, you are trying to get the total value outside the ngRepeat...
To achieve what you want just create a function in your controller, as below:
$scope.total = function(refrigerante, quantidade) {
return refrigerante.preco * quantidade;
}
Then call it in your view:
<tr ng-repeat="i in getNumber(number) track by $index">
...
<td ng-bind="'Valor total ' + total()"></td>
<!-- Or -->
<td>Valor total {{total()}}</td>
</tr>
I am using a expendable table for that the code is below
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Here I am using ng-repeat-start directive for expandable table.
but pagination showing this alert:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
and an error:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
Help me I need pagination in expandable table.
You have 2 errors, i think.
dirPaginate require use dir-paginate instead of ng-repeat.
You need use pagination control directive.
To solve you problem do next:
Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
Add in html <dir-pagination-controls></dir-pagination-controls>
Modified html
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>