I am new to angularjs. So , I have a contextmenu for the table data.
<div contextmenu-container="meta.contextmenu">
<table class="table table-striped table-bordered report-table" fixed-header>
<thead class="text-center text-info">
<th class="text-center">Annotation</th>
<th class="text-center">Field</th>
<th class="text-center">Message</th>
<th class="text-center">Score</th>
</thead>
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
<td>
<input type="checkbox" ng-if="report.attributes.message && showcheckbox"
ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
<span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
{{ report.attributes.message }}
</span>
<span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
</td>
<td class="text-center">{{ report.attributes.score }}</td>
<div contextmenu="meta.contextmenu" class="dropdown contextmenu ">
<ul class="dropdown-menu dropdown-content" role="menu">
<li>
<a role="menu" href
data-ng-click="deleteAnnotation(report.attributes.field)">
<span>delete</span>
</a>
</li>
</ul>
</div>
</tr>
</table>
</div>
In this,when I try to use the report.attributes.field in the deleteAnnotation method then It gives undefined . So,How can I solve it?
You can get each repeated object inside '$itemScope'.In your case it will be '$itemScope.report', after that you can perform whatever operations you want on that data.
In angular contextmenu , "meta.contextmenu.item" will point to "contextmenu-item". Hope this helps.
ui bootstrap contextmenu
HTML
<div ng-app="HelloWorldApp" class='container'>
<div ng-controller="HelloWorldController">
<table class='table table-striped'>
<tr>
<td><b>NAME</b></td>
<td><b>ADDRESS</b></td>
</tr>
<tr ng-repeat="obj in objects" >
<td>{{obj.name}}</td>
<td context-menu="menuOptions">{{obj.address}}</td>
</tr>
</table>
<div ng-bind="selected"></div>
</div>
</div>
JS
angular.module('HelloWorldApp', ['ui.bootstrap.contextMenu'])
.controller('HelloWorldController', function($scope) {
$scope.greeting = "Hello World";
$scope.objects = [{
name: 'person1',
address: 'India'
},
{
name: 'any name',
address: 'any address'
}];
$scope.menuOptions = [
['Select', function ($itemScope, $event, modelValue, text, $li) {
$scope.selected = $itemScope.obj.address;
}]
];
});
angular-contextmenu
HTML
<div ng-app="HelloWorldApp" class='container'>
<div ng-controller="HelloWorldController">
<div contextmenu="meta.contextmenu" class="dropdown contextmenu">
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">
{{ meta.contextmenu.item.address }}
</li>
<li>
<a role="menuitem" href
ng-click="delete(meta.contextmenu.item)"
>
<span>Delete</span>
</a>
</li>
</ul>
</div>
<table class='table table-striped' contextmenu-container="meta.contextmenu">
<tr>
<td><b>NAME</b></td>
<td><b>ADDRESS</b></td>
</tr>
<tr ng-repeat="obj in objects" contextmenu-item="obj" >
<td>{{obj.name}}</td>
<td context-menu="menuOptions">{{obj.address}}</td>
</tr>
</table>
Data to delete :
<pre>{{selected.name}}</pre>
<pre>{{selected.address}}</pre>
</div>
</div>
JS
angular.module('HelloWorldApp', ['io.dennis.contextmenu'])
.controller('HelloWorldController', function($scope) {
$scope.greeting = "Hello World";
$scope.objects = [{
name: 'person1',
address: 'India'
},
{
name: 'any name',
address: 'any address'
}];
$scope.delete = function(data){
console.log(data);
$scope.selected = data;
}
});
**you will need to include necessary libs for ui-bootstrap contextmenu and/or angular contextmenu
** And again, sorry for bad formatting.
You are calling deleteAnnotation after ending <tr> which has the ng-repeat
The variable report is in the ng-repeat scope so u need to call the deleteAnnotation function inside ng-repeat
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
<td>
<input type="checkbox" ng-if="report.attributes.message && showcheckbox"
ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
<span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
{{ report.attributes.message }}
</span>
<span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
</td>
<td class="text-center">{{ report.attributes.score }}</td>
</tr>
Here the scope is ended.
So you cannot access report
Also do not embed div in table tag
<table class="table table-striped table-bordered report-table" fixed-header>
<thead class="text-center text-info">
<th class="text-center">Annotation</th>
<th class="text-center">Field</th>
<th class="text-center">Message</th>
<th class="text-center">Score</th>
</thead>
<tr ng-repeat="report in reports.data">
<td class="text-center">{{ report.attributes.annotation }}</td>
<td class="td-report-field" contextmenu-item="row">{{ report.attributes.field }}</td>
<td>
<input type="checkbox" ng-if="report.attributes.message && showcheckbox"
ng-bind="report.attributes.message" ng-click="getcheckedData(report.attributes.message)">
<span ng-if="report.attributes.message" contentEditable ng-model="report.attributes.message">
{{ report.attributes.message }}
</span>
<span ng-if="!report.attributes.message">{{ report.attributes.message }}</span>
</td>
<td class="text-center">{{ report.attributes.score }}</td>
<td>
<div contextmenu="meta.contextmenu" class="dropdown contextmenu ">
<ul class="dropdown-menu dropdown-content" role="menu">
<li>
<a role="menu" href="#"
data-ng-click="deleteAnnotation(report.attributes.field)">
<span>delete</span>
</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
Try this. Also check report has a attributes.field property in that loop.
Related
i have following code my data does not sort according to datetime please help me this i am using <div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div> i think its show problem , check below code i have more then 30 records that's why sorting problem
<table st-table='displayedAssets' st-safe-src="assetController.assetsData" class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer">
<thead>
<tr>
<td colspan="9">
<ul class="list-inline list-unstyled">
Search
<li><input st-search="city" placeholder="City" class="input-sm form-control" type="search" /></li>
<li> <input st-search="region" placeholder="Region" class="input-sm form-control" type="search" /></li>
<li><input st-search="medium" placeholder="Medium" class="input-sm form-control" type="search" /></li>
</ul>
</td>
</tr>
<tr>
<th>City</th>
<th>create date</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedAssets | orderBy:'created_date':true ">
<td>{{ row.city }}</td>
<th>{{ row.created_date }}</th>
<td>{{ row.location }}</td>
<td>
<button type="button" title="Delete" ng-click="assetController.showConfirm($event, row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="text-right">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
angularjs js
this.$http.get('/api/assets')
.then(response => {
this.assetsData = response.data;
this.socket.syncUpdates('asset', this.assetsData);
});
Date sorting
let dateTimeArr = ["11/14/13 12:07","12/13/11 01:07","09/09/12 09:04","08/30/14 19:05","04/24/04 16:03","08/15/16 10:02","12/13/11 02:07"]
let sortedArr = dateTimeArr.sort((a,b)=>{
return new Date(a).getTime() - new Date(b).getTime();
})
console.log(sortedArr);
I have a table which is displaying nested ng-repeat values. The HTML looks like this.
<table class="table">
<thead class="bgThead">
<tr>
<th>Environment</th>
<th>Configurations</th>
<th>Servers</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
<td>{{environment.Environment}}</td>
<td ng-repeat="servertypeinfo in environment.ServerTypeInfo">{{servertypeinfo.Type}}</td>
<td ng-repeat="servertypeinfo in environment.ServerTypeInfo">
{{servertypeinfo.ServerConfigInfo.length}}
<td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
</td>
</tr>
</tbody>
</table>
Now, when there are multiple values in child ng-repeat, the TDs are getting repeated, instead I want the whole row to be repeated, with the same values, except the new children value. Same goes with further nested ng-repeats. I made a plunk which shows what I am aiming for.
http://plnkr.co/edit/vLw6MCO8NGoFYxaCKeJ0?p=preview
Example without table, may not be what you are looking for
<div class="form-group" ng-repeat="environment in serverList.environments track by $index">
<div class="col-md-4">
<span ng-bind="environment.environment"></span>
</div>
<div class="col-md-8">
<ul class="list-group">
<li id="{{$index}}" ng-repeat="servertypeinfo in environment.serverTypeInfo track by $index">
Server Type: <span style="font-size: 16px;" class="no-margin" ng-bind="servertypeinfo.type">{{servertypeinfo.serverConfigInfo.length}}</span>
<p class="no-margin" ng-repeat="server in servertypeinfo.serverConfigInfo">
Server Name: {{server.serverName}}
</p>
</li>
</ul>
</div>
</div>
use the format like this
<tbody>
<tr ng-repeat="environment in serverList.environments" ng-class-odd="''" ng-class-even="'dataTableOdd'">
<td>
<table>
<tr ng-repeat="servertypeinfo in environment.ServerTypeInfo">
<td>{{environment.Environment}}</td>
<td>{{servertypeinfo.Type}}</td>
<td>
{{servertypeinfo.ServerConfigInfo.length}}
<td ng-repeat="servers in servertypeinfo.ServerConfigInfo">{{servers.ServerName}}</td>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
Trying to loop through ng-repeat (key, values) and used key as tab header as well as href="#{{ key }}". Using the same key as id for tab-content-panel created new ng-repeat trying to access the parent values(values from parent ng-repeat). However not able to access the parent key, values in the tab-content elements. How can we use parent loop key, values in the child loop?
<div>
<ul class="nav nav-tabs" >
<li class="active" ng-repeat="(key, values) in specs" ng-class="{'active': isActive(key)}"><a data-toggle="tab" href="#{{ key }}">{{ key }}</a></li>
</ul>
<div class="tab-content">
<div id="{{ key }}" class="tab-pane fade in active">
<table class="table" style="padding: 1 0px;">
<tbody>
<tr ng-repeat="(k, value) in values">
<td>{{k}}</td>
<td>{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
You need to set angular ng-virtual-repeat value true.
refer this one. Here, set loop inside a loop
http://klajd.github.io/angular-virtual-repeat/#/Home
https://github.com/klajd/angular-virtual-repeat
Example :
<div>
<md-table-container virtual-repeat="true" sortable-columns="true" animate-sort-icon="true">
<table md-table >
<thead md-head>
<tr md-row >
<th md-column ng-repeat="header in headerData "><span> {{header}}</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="folder in Folders" style="height:30px">
<th md-cell > <center><span style="" class="glyphicon glyphicon-option-vertical"></span></center></th>
<th md-cell ng-dblclick="openFolder(folder)" md-autofocus >{{folder.folderName}}</th>
</tr>
<tr md-row ng-repeat="files in fileData" style="height:30px" >
<th md-cell ><center><span style="width: 10px; height: 15px;" class="glyphicon glyphicon-option-vertical"></span></center></th>
<th md-cell ng-click="getFileId(files)" md-autofocus >{{files.fileName}}</th></tr></tbody>
</md-table-container>
</div>
When mouse hovers on a cell, suppose effect X takes place. How can I remove the hover effect?
JS Fiddle
HTML code:
<table class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Key</th>
<th>Valeur version {{application.version}}</th>
<th></th>
<th>Valeur version {{applicationcible.version}}</th>
</tr>
</thead>
<tbody ng-repeat="group in groups">
<tr>
<td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
<a href="" ng-click="group.$hideRows = !group.$hideRows">
<span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
<strong>{{group.name}}</strong>
</a>
</td>
</tr>
<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
<td rowspan="2">
{{ member.name }}
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowLeft}">{{ member.valueRef }}</td>
<td class="cube" >
<div ng-if="group.id != 1">
<button type="button" ng-click="moveLeft($index, group)" ><span class="glyphicon glyphicon-chevron-left"></span></button>
</div>
</td>
<td rowspan="2" ng-class="{selected: $index==selectedRowRight}">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup" >
<td class="cube" >
<div ng-if="group.id != 2">
<button type="button" ng-click="moveRight($index, group)"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Update
I tried this CSS:
tbody tr:hover td.hasRowSpan {
background-color: none; /* or whatever color you want */
}
It doesn't work, unfortunately.
Remove the class "table-hover" from the table tag.
http://jsfiddle.net/ozr598jb/6/
You would have take Bootstrap hover rules and cancel background color with inherit (default, which is none):
.table-hover>tbody>tr:hover>td,
.table-hover>tbody>tr:hover>th {
background-color: inherit;
}
Of course it makes more sense to set some other hover style, other color, or border, etc. Otherwise don't use table-hover class on the table in the first place.
Demo: http://jsfiddle.net/ozr598jb/3/
I have a table, within which I have a span element which I want to collapse expand when I click on the top row of the table. I am using the anuglar function collapse
So far this is working fine but if I have three identical tables, clicking one top row collapses all three of them.
Can I pass some unique identifier into the collpase function somehow?
HTML
<div ng-repeat="detail in details.detail">
<div class="my_table">
<table>
<tbody>
<tr class="top_row" ng-click="isCollapsed = !isCollapsed">
<td colspan="2">
<span class="f_name">
{{ details.f_name }}
</span>
<span class="l_name" >
{{ details.l_name }}
</span>
</td>
</tr>
<tr>
<td class="detail">
<span class="_address" collapse="isCollapsed">
{{ details.address }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JS
function CollapseCtrl($scope) {
$scope.isCollapsed = false;
}
You can use special variable $index in ng-repeat and also use array for model
<div ng-repeat="detail in details.detail">
<div class="my_table">
<table>
<tbody>
<tr class="top_row" ng-click="isCollapsed[$index] = !isCollapsed[$index]">
<td colspan="2">
<span class="f_name">
{{ details.f_name }}
</span>
<span class="l_name" >
{{ details.l_name }}
</span>
</td>
</tr>
<tr>
<td class="detail">
<span class="_address" collapse="isCollapsed[$index]">
{{ details.address }}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
function CollapseCtrl($scope) {
$scope.isCollapsed = [];
}