In my AngularJS 1.3 application I have this calendar, the unique cells are clickable:
What I will do is that if mouse is over e.g. 12. April and of user 3 (Marktl) than
12. April 2017
Marktl
should be shown next to the mouse pointer.
Is there a way of doing this (maybe with support of AngularJS)?
Here my html code of the calendar written by my own:
<table class="absenceOverviewTable tableShadow">
<thead>
<tr class="first-header">
<th></th>
<th></th>
<th class="center first month-header" data-ng-repeat="value in vm.currentMonthNames track by $index">{{value}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="scheduleAbsenceUserContainer in filtered = (institution.scheduleAbsenceUserContainers">
<td>
<div class="userNameColumn" title="{{scheduleAbsenceUserContainer.institutionUserRole.value | translate}}"></div>
</td>
<td data-ng-repeat="scheduleAbsenceMonthContainer in scheduleAbsenceUserContainer.scheduleAbsenceMonthContainers">
<table class="days-table">
<tr>
<td data-ng-repeat="scheduleAbsenceDayContainer in scheduleAbsenceMonthContainer.scheduleAbsenceDayContainers track by $index">
<div class="data-table-pos border-color width-100">
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
It's not entirely clear from your original question exactly what behaviour you want.
If you want something to appear as a tooltip on hover of the cell, you could just use the regular html title attribute. Downside with that is it won't appear immediately, you have to hover for like 2 seconds.
If you want a tooltip to appear immediately, you could try something like Angular Material's tooltip: https://material.angularjs.org/latest/demo/tooltip
Related
I am trying to render a json as a table in a HTML Template using angularjs ng-repeat element. The script file passes the JSON object, but the ng-repeat wont render the contents of JSON.
I followed the steps from this tutorial link.
https://codepen.io/salva341/pen/aYKmvG
html template section where ng-repeat doesn't render properly
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="ttm in records.response" >
<td>{{ttm.name}} </td>
<td>{{ttm.status}} </td>
<td>{{ttm.name}} </td>
<td>{{ttm.name}} </td>
</tr>
</tbody>
</table>
</div>
app.js
angularjs 1.6.6
$http.get("/api/data-depot/currentjob/list")
.then(function(response) {
$scope.records = {"response":response.data}
$scope.parseItem = function(string)
{
var newString = string.replace(/['\']/g,'');
var jsonFormated = JSON.parse(newString);
return jsonFormated.Message;
}
});
Google chrome inspector : Section inspection screenshot
I have used an angularjs add-on inspector for chrome.
It looks like ttm is the array you want to display for. So I believe your ng-repeat should be more like:
<tr ng-repeat="record in ttm" >
<td>{{record.name}} </td>
<td>{{record.status}} </td>
<td>{{record.name}} </td>
<td>{{record.name}} </td>
ttm being the array, and record being a made-up name for each item in that array.
See: https://www.w3schools.com/angular/ng_ng-repeat.asp
As per your code, your are referencing wrong array name in your HTML binding.
Try this
<div ng-controller="WorkflowShowCntrl">
<table class="table striped">
<thead>
<th>Job Name</th>
<th>Job Id</th>
<th>Start Time</th>
<th>Status</th>
</thead>
<tbody>
<tr ng-repeat="item in records.response.ttm" >
<td>{{item.name}} </td>
<td>{{item.status}} </td>
<td>{{item.name}} </td>
<td>{{item.name}} </td>
</tr>
</tbody>
</table>
</div>
Finally I was was able to achieve what I wanted.
I added ng-bind element to display the data on the html template. That is weird. No of the scope variable gets displayed on the html template without ng-bind element. This investigating that is strange this is happening.
I would like to thank #Thaier Alkhateeb for their valuable comment.
Revised code snippet
<tbody ng-repeat="data in records.response ">
<tr ng-repeat="ttm in data">
<td ng-bind="ttm.name"> </td>
<td ng-bind="ttm.appId"> </td>
<td ng-bind="ttm.created"> </td>
<td ng-bind="ttm.status"> </td>
</tr>
</tbody>
I want to disabled the button Dissolve if the field in the status column is close or vise versa.
I tried applying ng-module n ng- disabled but something went wrong.
If anybody knows how to do it in Angularjs then plz help me out
<table>
<tr>
<th>Ticketid</th>
<th>status</th>
<th>Dissolve</th>
</tr>
<tr>
<td>12345</td>
<td>Close</td>
<td><button>Dissolve</button></td>
</tr>
<tr>
<td>4321</td>
<td>open</td>
<td><button>Dissolve</button></td>
</tr>
</table>
You need to use ng-if and ng-disabled together,
<tr>
<td>4321</td>
<td>open</td>
<td ng-if="status ==='close'"><button ng-disabled="true">Dissolve</button></td>
</tr>
I have a HTML table and in several rows I have a Material Design button in each cell, dynamically generated using AngularJS.
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
Only one of button can be selected at a time (i.e. like a radio button).
How do I change the color of the selected button?
I got it to work by putting the ng-class on the button, using the ternary operator
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="plan.planName == selectedPlanName ? 'md-raised md-primary' : 'md-raised'">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
A ng-class attribute will do the trick.
In your function selectPlan you probably save the name somewhere. Assuming this var is named selectedPlan, you can do something like this :
<table class="plans">
<tbody>
<tr>
<td>Work Plans</td>
<td ng-click="pbmainController.selectPlan(plan.planName)"
ng-repeat="plan in pbmainController.planList">
<md-button ng-class="{'active' : plan.planName == selectedPlan}" class="md-raised">{{plan.planName}}</md-button>
</td>
</tr>
</tbody>
</table>
ng-class will be apply your class (here active) only when the condition is true. So only when your plan is the selected one.
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
I am trying to add a second row (<tr>) in the code below for each event in events in the ng-repeat. However, it only adds a single row at the end, I need each new row (class="info") to be BETWEEN each of the other rows with the rel attribute.
The cell in the info row will be filled via ajax and toggled when the Details link is clicked, it will then be toggled again when the Close link is clicked (Details changes to Close). It will work similar to this fiddle: http://jsfiddle.net/Mrbaseball34/btwa7/
How would I do that in AngularJS?
<tbody id="events_tbody">
<tr ng-repeat="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>
You need to make use of the special ng-repeat-start and ng-repeat-end attributes (explained here):
<tbody id="events_tbody">
<tr ng-repeat-start="event in events" rel="{{event.EVE_EVENT_CODE}}">
<td>{{event.COURSE_TYPE}}</td>
<td>{{event.EVE_FORMAL_DATE}}</td>
<td>{{event.EVE_DESCRIPTION}}</td>
<td>{{event.PRICE | dollars}}</td>
<td class="nb">
Details
</td>
</tr>
<!-- Now add Details row: -->
<tr ng-repeat-end class="info" style="display:none;">
<td colspan="5" id="info_{{event.EVE_EVENT_CODE}}"></td>
</tr>
</tbody>