I am trying to check from the actor name based on the movie clicked. If the movie i clicked has no actors it should show an error message but mine its still showing an empty table with the table heads only. Are there any ways to validate it? The same code i tried in my film listing by category its working. Thanks in advance.
<table class="table table-bordered table-hover" ng-show="actor.length">
<thead>
<tr>
<th>Actor Name</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="actor in actors" data-ng-show="showSuccessMessage">
<td>
{{actor.first_name + " " + actor.last_name}}
</td>
</tr>
</tbody>
</table>
<h4 ng-show="!actor.length">No actors available in this movie</h4>
I think it should be ng-show="actors.length" and ng-show="!actors.length
Related
I'm receiving a JSON list from server that could contain any number of properties of any name. I need to show that list on my page. Populating a table when you know the names of properties is easy, but for this one I'm totally lost. Any help would be appreciated.
You can do this,
HTML:
<table>
<thead>
<tr>
<th ng-repeat="(header, value) in resultData[0]">
{{header}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in resultData">
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
Here is a sample
I have a table on html page and this table have 15 records. each column have sorting functionality.
There is a edit button on each row to edit row value in separate tab, its working fine before sorting of data.
Means if you have clicked on table's column than edit function is not called.
`<table id="tbl" class="table table-striped table-bordered"
datatable="ng" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Code</th>
<th>Status</th>
<th>Notes</th>
<th>Description</th>
<th style="text-align:center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in entities">
<td>{{e.name}}</td>
<td>{{e.code}}</td>
<td>{{getStatus(e.status)}}</td>
<td>{{e.notes}}</td>
<td>{{e.description}}</td>
<td align="center">
<span class="glyphicon glyphicon-pencil" />
<span style="color: #ddd;">|</span>
<span class="glyphicon glyphicon-trash" />
</td>
</tr>
</tbody>
</table>
And controller code as below :
$scope.edit = function (entity) {
alert('name');
$scope.entity = entity;
$scope.activate('view');
};
This function named as edit called until we not click on header of data table.
please suggests what is issue.. thanks in advance
I am getting the data for customers and displaying in on table (ng-repeat) on the main page. The main page also has search option which filter the data by a particular customer ID.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
</tr>
</table>
The result I want to reach is that when a user clicks on the customer ID (which is one of the rows on the table displayed), a new view should open, where more details about that particular customer can be seen. I know basics of routing, but I can not get the best way to solve this problem, as there are many customers!
How can I give each customer ID, a different view that shows detail of that customer? What tools does Angular have for that? Just need a rough idea how to approach this problem using AngularJS!
Well you could either redirect user to a 'show' page like so:
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a ng-click="viewCustomer(data.kvk)" class="btn btn-xs btn-success"><span class="glyphicon glyphicon-search"></span></a></td>
</tr>
</table>
then in your controller:
$scope.viewClient = function(id) {
//path to your view using id
};
or else create a hidden table in the same view and show upon button click. I am using bootstrap accordion for sample purposes.
<table id="searchResults" class="table table-bordered">
<tr>
<th>Klantnummer</th>
<th>Voorletters</th>
<th>Tussenvoegsel</th>
<th>Achternaam</th>
<th>Geboortdatum</th>
<th> Actief Sinds</th>
<th></th>
</tr>
<tr ng-repeat="data in allData | filter:kvk">
<td>{{data.kvk}}</td> //this is the customer ID
<td>{{data.voorletters}}</td>
<td>{{data.tussenvoegsel}}</td>
<td>{{data.achternaam}}</td>
<td>{{data.geboortedatum}}</td>
<td>{{data.actief}}</td>
<td><a data-toggle="collapse" data-target="#{{data.kvk}}"></a> </td>
</tr>
<tr>
<td>
<div class="accordion-body collapse" id="{{data.kvk}}">
<!-- your content here -->
</div>
</td>
</table>
hope it helps.
I have a problem of performance and i don't find the solution.
Context: I need to display a lot of data ( 500 lines, 8 columns ) in a table. To displayed this data i chosed to use Smart-table because it offers good functionality but the problem is that i have a lot of data and the time of displaying data is very long ( 5 - 9 second, this depend of device performance ).
Important thing: I need to display all data so i don't want pagination method, limit filter.
So this code is working :
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tableaux">
<td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
I read that Ionic made a directive (collection-repeat) wich allows an app to show huge lists of items much more performantly than ng-repeat. So i tried to remake my solution with collection-repeat but that doesn't work...
Code collection-repeat solution:
<ion-scroll class="scrollVertical">
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ColumnTable">{{column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ColumnTable">
<input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr collection-repeat="row in tableaux" item-width="200px" item-height="100px">
<td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
Error: Maximum call stack size exceeded
Questions: Is there any angularjs or ionic solution to increase performance of smart-table with a lot of data ?
What's wrong with my collection-repeat ?
What version of Ionic are u using? If you are using version 1.0 beta 14 or higher use bind once (native in Angular 1.3)
It would like like this.
<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
<table st-table="tableaux" class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th>
</tr>
<tr>
<th ng-repeat="column in ::ColumnTable">
<input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in ::tableaux">
<td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td>
</tr>
</tbody>
</table>
</ion-scroll>
How are you loading your datas ?
If you are doing a $scope.ColumnTable.push(newData); then this is not a proper way to do it.
What I do is :
create a service that load a Temporary Table : let's call it myService.setTable().
Inform your controller with an event : This service sends an event $rootScope.$broadCast("myService.setTable-refresh")
Catch the event into your controller & update table : $scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});
Update your HTML to work with myWorkingTable
Moreover, you shall define an unique key into your ng-repeat for performance optimisation used by track by to prevent rebuilding already created content.
See explanation here : http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm
By using angular smart table, how do i get the result set by using offset value.
For example, I have 100 records in the database
First i need to get 20 records from database and to display only 10 items per page.
After clicking the 3rd page, need to query the database(service call) and get the another 20 records..etc(but no server call for 2nd page)
I am using smart table pipe/ajax plugin to display the records.
How to achieve using this.
<div class="table-container" ng-controller="pipeCtrl as mc">
<table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
<thead>
<tr>
<th st-sort="id">id</th>
<th st-sort-default="reverse" st-sort="name">name</th>
<th st-sort="age">age</th>
<th st-sort="saved">saved people</th>
</tr>
<tr>
<th><input st-search="id"/></th>
<th><input st-search="name"/></th>
<th><input st-search="age"/></th>
<th><input st-search="saved"/></th>
</tr>
</thead>
<tbody ng-show="!mc.isLoading">
<tr ng-repeat="row in mc.displayed">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.saved}}</td>
</tr>
</tbody>
<tbody ng-show="mc.isLoading">
<tr>
<td colspan="4" class="text-center"><div class="loading-indicator"></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
</td>
</tr>
</tfoot>
</table>
</div>
http://lorenzofox3.github.io/smart-table-website/
code in the Plunker
http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
You need to add st-safe-src="tablecollection" as well as st-table=tablerow
Then,
<tr ng-repeat="row in tablerow">
FMI,
source: Client side pagination not working in smart table
Set the page size to 10.
Maintain a service level array object (var fetchedData) for the fetched rows from the server.
Only call the server if the required amount of data not available in the client side.
Always filter the data for the pagination from fetchedData.
Something like this in your service.
var fetchedData = [];
function getPage(start, number, params) {
if (fetchedData.length < (start + number)) {
//get the next 20 rows from the server and add to fetchedData;
}
var filtered = params.search.predicateObject ?
$filter('filter')(fetchedData, params.search.predicateObject) :
fetchedData;
//rest of the logic