I have a table with one of the columns showing datetime value. I am using angularjs ngtable module.
<div ng-controller="TestCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="test in $data">
<td data-title="'name'" >
{{test.name}}
</td>
<td data-title="'remarks'">
{{test.date}}
</td>
</tr>
</tbody>
</table>
</div>
An example of {{test.date}} looks something like 2015-12-08T16:00:00.000Z. I would like to convert it to Dec08 16:00:00. How can this be done in angularjs?
yes, in Angular doc you have examples: Link
try something like: {{test.name | date:'MMMdd HH:mm:ss'}}
Related
I want to create a table that look like that:
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
with angular, using ng-repeat.
I tried to do it with this html but it doesn't work.
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
</thead>
<tbody>
<div ng-repeat="item in items">
<tr>
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr>
<td colspan="5">QWERTY</td>
</tr>
</div>
</tbody>
</table>
</div>
You can use ng-repeat-start and ng-repeat-end when you can't accomplish what you're after by placing ng-repeat on a single element. Something like:
<tbody>
<tr ng-repeat-start="item in items">
<td>{{item.val1}}</td>
<td>{{item.val2}}</td>
<td>{{item.val3}}</td>
<td>{{item.val4}}</td>
<td>{{item.val5}}</td>
</tr>
<tr ng-repeat-end>
<td colspan="5">QWERTY</td>
</tr>
</tbody>
I am trying to fetch data from mysql using php and trying to pass the data in json format to angularjs so that I can display data in table.
HTML code is:
<body ng-app="myModule">
<div class="row">
<div class="col-lg-12 text-center">
<div ng-controller="myController">
<table class="table">
<thead>
<tr>
<th>email</th>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.row -->
</div>
AngularJS code is:
var app = angular
.module("myModule", [])
.controller("myController", function ($scope,$http) {
$http.post('http://enrolin.in/test/login.php')
.then(function(response){
$scope.employees=response.data;
}); });
Working php link that outputs json is : http://enrolin.in/test/login.php
Working link of table is http://enrolin.in/test/
But when I try to load the html. It does not load any data from the database.
I tried to view it in console, looks like ng-repeat is repeated 6 times that is exactly the number of rows in database that means data is imported but is not being displayed somehow
It is just a silly mistake in your view (can't believe I overlooked it at first).
You are just repeating empty rows now:
<tbody>
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tbody>
Those tds obviously need to be inside the repeated row:
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
</tbody>
The problem seems to be in your HTML.
<tr ng-repeat="employee in employees"></tr>
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
The <td> are outside the <tr>, so {{ employee }} does not exist in the <td>.
This should work :
<tr ng-repeat="employee in employees">
<td>{{employee.username}}</td>
<td>{{employee.id}}</td>
<td>{{employee.name}}</td>
</tr>
I got the following html. I cut several columns
<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
<tr ng-repeat="pilot in $data">
<td data-title="'Licensee Id'">{{pilot.license}}</td>
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td>{{licence}}</td>
</tr>
</tbody>
</table>
</td>
<td data-title="'Origin'">{{pilot.origin}}</td>
</tr>
</table>
My controller has these tableParams:
self.tableParams = new NgTableParams({
count: 2
}, {
dataset: self.newIntroductoryFlight.pilots,
counts: []
});
It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on.
Can i place tables in ng-table td-elements?
A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'
angular.forEach(row.find('td'), function(item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
return;
}
The fix
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td ignore-cell="true">{{licence}}</td>
</tr>
</tbody>
</table>
</td>
Adding this on fixed the header display issues for me.
Essentially I need to add a little button or something within the headers of the table to be able to sort the data alphabetically by column. I've been having trouble with doing this making use of AngularJS and need some help with it.
This is a snippet showing the table and...
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status</th>
<th>Ref</th>
<th>Service</th>
<th>Domain</th>
<th>Service Owner</th>
<th>Stage</th>
</tr>
</thead>
<tbody>
<tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td><u>{{x.c}}</u></td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="6">
<h3>Test</h3>
<p>Test</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This is a plnkr of the code http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview
Give this a try for a very simple solution:
HTML:
<table>
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
JavaScript:
app.controller('controller', function($scope) {
$scope.orderProperty = "f"; // Sort by "f" by default
$scope.projects = [...];
});
Working jsFiddle here: http://jsfiddle.net/ben1729/3nxykbhk/
Is it possible to make a tablecolumn editable when using angularjs? I have this table:
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td>{{person.id}}</td>
<td>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>
So I have a $scope.fileNames which is an array containing filenames per person for example:
["Koala.jpg","Tulips.jpg","Tulips.jpg","Hydrangeas.jpg","Lighthouse.jpg","Chrysanthemum.jpg"]
I would like to make this 2nd column editable for the user so he can change/delete the files how can I accomplish this?
Use contentEditable
<table>
<thead>
<tr class="header">
<th>id</th>
<th>files</th>
</tr>
</thead>
<tbody ng-repeat="person in persons">
<tr>
<td contentEditable>{{person.id}}</td>
<td contentEditable>{{person.fileNames)}}</td>
</tr>
</tbody>
</table>