Develop Reference

Repeat parent row in nested ng-repeat Angularjs?

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>

Not getting the expression value in the table

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.

How to hide ng-table columns?

I I've tried using ng-hide and ng-show to show one different column when vm.allRecords is set to true:
<table ng-table="vm.tableParams" ng-hide="vm.noRecords || vm.DashboardService.loading">
<tr ng-repeat="record in $data">
<td title="'Title'" sortable="'title'" class="title">
<a ng-href="{{vm.baseUrl}}#entity/displayEntity?entityId={{record.entityId}}" target="_blank">
{{record.title}}
</a>
</td>
<td title="'Date Created'" sortable="'createdDate'" class="date">{{record.createdDate}}</td>
<td title="'Last Modified'" sortable="'lastModified'" class="date">{{record.lastModified}}</td>
<td title="'Notebook Descriptor'" sortable="'notebookDescription[0]'" class="description">
<ul>
<li ng-repeat="description in record.notebookDescription">{{description}}</li>
</ul>
</td>
<td title="'Witness'" sortable="'witnesses[0].display'" class="witness" ng-hide="vm.allRecords">
<ul>
<li ng-repeat="witness in record.witnesses">{{witness.display}}</li>
</ul>
</td>
<td title="'Due Date'" sortable="'dueDate'" class="date" ng-hide="vm.allRecords">{{record.dueDate}}</td>
<td title="'Status'" sortable="'status'" class="status" ng-show="vm.allRecords">{{record.status}}</td>
</tr>
</table>
but the cells in the header are not hidden. I've also try to use custom th using this:
<tr>
<th>Title</th>
<th>Date Created</th>
<th>Last Modified</th>
<th>Notebook Descriptor</th>
<th ng-hide="vm.allRecords">Witness</th>
<th ng-hide="vm.allRecords">Due Date</th>
<th ng-show="vm.allRecords">Status</th>
</tr>
it work but I don't have sorting. How can I hide columns and have sorting?

I've changed ng-show/ng-hide to ng-if and it work.

Angular, limit sub repeat [duplicate]

This question already has answers here:
How to get the index of an parent scope array/ng-repeat inside child ng-repeat
(3 answers)
Closed 8 years ago.
I am trying to limit a sub repeat by the index of its parent repeat. So whaever level index it on it will be limited to that (+ 1 so we dont start at 0). Here is my thinking -
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: face.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
So the tr inside the table would be limited to the initial repeat of face, buy faces $index + 1. This is not working. Any insight would be much appreciated. Thanks!

You can use ng-init to save a reference to the upper $index
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent" >
<div class="trialGrid" ng-init="$faceIndex = $index">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $faceIndex + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>

Instead of face.$index use $parent.$index because you want to refer parent ng-repeat $index.
Because ng-repeat creates an isolated scope from its current running scope.
CODE
<div class="inputRepeater" ng-repeat="face in inputFaces" ng-show="face.isCurrent">
<div class="trialGrid">
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="(key, val) in rowCollection[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | limitTo: $parent.$index + 1">
<td ng-repeat="item in row">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this would be helpful to you.

Remove mouse hover effect

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/