I'm creating a list of tables with collapsible tbodys. This code works fine but I want to have the first tbody open on default. I've tried ng-init="showReports0" on the table tag, but this doesn't work. I've also tried to predefine $scope.showReports0 = true; in the controller. Can anyone help me out here?
<table ng-repeat="set in reportsData" class="table table-striped hover-table report-list" id="reportList-{{$index}}" ng-init="showReports0">
<thead>
<tr>
<th colspan="3" class="trigger-man" ng-model="showReports[$index]" ng-click="showReports[$index] = !showReports[$index]" style="width: 100%;">{{set.type}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': showReports[$index], 'glyphicon-chevron-right': !showReports[$index]}"></span></th>
</tr>
</thead>
<tbody ng-hide="!showReports[$index]">
<!-- Start Dynamic Reports Content -->
<tr class="hover-check" ng-class="{'compare-row disabled': item.type=='Comparative' && selectionData.length == 1, 'rep-checked': item.checked}" ng-repeat="item in set.reports | orderBy : 'sequence'">
<td class="no-pad"><div href="" class="popup pop-details no-match" uib-popover-template="nomatchPopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
<label class="checkbox checky">
<input type="checkbox" ng-change="reportPush(item.checked, item)" ng-true-value="true" ng-false-value="false" ng-model="item.checked" class="hidden">
</label></td>
<td class="rep-list-td"><div href="" class="popup pop-details no-compare" uib-popover-template="comparePopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
{{item.name}}</td>
<td class="cell-details">Details</td>
</tr>
</tbody>
</table>
Related
I'm trying to do a table with ng-repeat. This is my code
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" class="{{n.fondo}}">
<td style="width: 32%;"><div class="bordeTab">
<div class="{{n.color}}First" >
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF" ng-if="n.nombre == dato.nombre">
<div class="{{n.color}}" >
{{dato.valor}}
</div><br>
</td>
</tr>
</tbody>
</table>
Once it enter to this ng-repeat="dato in datosCF", I do and if to print a value, but if the if returns me false I need to print this "-".
It sounds like you want to include all rows, but the content of the row is different based on some condition. If that's the case, you can try moving the conditional logic into the body of your <td> element, and having two divs with contradictory ng-if expressions:
<table class="tab2" >
<thead>
<tr>
<th>Currency: USD '000s</th>
<th ng-repeat="s in periodosCF">{{s.periodo | date:"yyyy"}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in nombreFilasCF" ng-class="n.fondo">
<td style="width: 32%;"><div class="bordeTab">
<div ng-class="n.color + 'First'">
{{n.nombre}}
</div> <br>
</div>
</td>
<td ng-repeat="dato in datosCF">
<div ng-if="n.nombre === dato.nombre" ng-class="n.color">
{{dato.valor}}
</div>
<div ng-if="n.nombre !== dato.nombre">
-
</div><br>
</td>
</tr>
</tbody>
</table>
I also changed your interpolated class attributes to ng-class.
I have a table, in which i would like to only show rows that match some variables, as well as hide/show all rows.
So, with additional variables to add later, how would i implement a hide/show all functionallity preferably with keeping the <"a> tags
<span class="glyphicon glyphicon-triangle-bottom"></span> Expand all
<span class="glyphicon glyphicon-triangle-right"></span> Hide all
<table style="width: 50%" class="table table-striped table-bordered table-hover">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-1">
</colgroup>
<thead>
<th>ID</th>
<th> name</th>
<th> name</th>
<th>Action</th>
</thead>
<tbody>
<tr class="{{ a.b ? 'danger' : 'success' }}" ng:repeat:start="entity in entities">
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td>{{a.asd.name}}</td>
<td>
<a class="glyphicon glyphicon-pencil" href="#project/{{project.id}}"></a>
<a class="glyphicon glyphicon-triangle-bottom" href="" class="rowtrigger" data-toggle="collapse" data-target="#detail_{{project.id}}"></div>
</td>
</tr>
<tr ng:repeat:end>
<td colspan="4" class="collapse-row">
<div id="detail_{{a.id}}" class="collapse statuslabel">
<span ng:repeat="version in a.versions" class="label label-{{ version.b ? 'danger' : 'success' }}">
{{version.version}}
</span>
</div>
</td>
</tr>
</tbody>
</table>
You could put a click event on the Hide/Show all and have that set a boolean property in the controller. Then bind that boolean property to the ngHide attribute on the rows. You could do something like ng-hide="hideAll || <whatever other conditions you want>"
I have a table inside a bootstrap-modal which has overflow set to auto so that it scrollable. However I need to load a lot of data so I would like to implement lazy-loading using ngInfiniteScroll. I have tried using the infinite-scroll-container attribute but it's still triggering constantly. Here is a code-snippet:
<div class="modal-body">
<table class="table" id="msds-table" ng-show="vm.modalViewLoaded" infinite-scroll="vm.log()" infinite-scroll-container='"#msds-table"'
infinite-scroll-disabled="!vm.modalViewLoaded">
<thead>
<tr>
<th>CODE</th>
<th>TYPE</th>
<th>PRODUCT</th>
<th>ONBOARD</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sheet in vm.datasheets | filter:onboardQuery | filter: (notOnBoardOnly ? {onboard:false} : {onboard:any})">
<td>{{sheet.code}}</td>
<td>{{sheet.type}}</td>
<td>{{sheet.product}}</td>
<td>
<span class="checkbox">
<input type="checkbox" data-ng-model="sheet.onboard" data-ng-value="sheet.onboard">
</span>
<span data-ng-show="!sheet.onboard">Click to select</span>
<us-list-select ng-model="sheet.located"
data-ng-show="sheet.onboard"
options="{list:vm.storageLocations}">
</us-list-select>
</td>
</tr>
</tbody>
</table>
<div ng-show="!vm.modalViewLoaded" style="text-align:center;padding-top:20px;">
<img src="images/ajax-loader.gif">
</div>
</div>
Any ideas?
I am trying to index my ng-repeat so that I can edit a row by making the one with text disappear and the one with inputs appear.
<div ng-controller="BusinessGoalsCtrl">
<table class="table table-hover">
<tr>
<th>Type:</th>
<th>Timeframe:</th>
<th>Goal:</th>
<th>Edit:</th>
</tr>
<tr ng-class="editMode ? 'ng-hide' : ''" ng-repeat="details in businessGoalDetails track by $index">
<td style="width:30%;">{{details.display_name}} {{$index}}</td>
<td style="width:30%;">{{details.timeframe}}</td>
<td style="width:30%;">{{details.threshold}}</td>
<td style="width:10%;"><i ng-click="toggleEdit(true, $index)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-class="editMode ? '' : 'ng-hide'" ng-repeat="inputs in businessGoalDetails track by $index">
<td style="width:30%;"><input ng-model="inputs.display_name"/></td>
<td style="width:30%;"><input ng-model="inputs.timeframe"/></td>
<td style="width:30%;"><input ng-model="inputs.threshold"/></td>
<td style="width:10%;"><i ng-click="toggleEdit(false, $index)" class="fa fa-check"></i></td>
</tr>
</table>
</div>
Angular Code
$scope.editMode = false;
$scope.details = 0;
$scope.toggleEdit = function (showEdit, $index) {
console.log("editing view");
$scope.editMode = showEdit;
}
You could probably just use ng-if/ng-show instead of ng-class and use ng-repeat-start/end instead of creating 2 different ng-repeats. Also you could just make a single row editable by setting property on its child scope or on the object under iteration. In your code you are setting the property editMode at the parent scope level and not only that it is not specific to each row.
<tr ng-show="!details.editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=true" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="details.editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=false" class="fa fa-check"></i></td>
</tr>
Or
<tr ng-show="!editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(true)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(false)" class="fa fa-check"></i></td>
</tr>
and
$scope.toggleEdit = function (showEdit) {
this.editMode = showEdit; //'this' here is the child scope
}
I'm using bootstrap to accomplish expanding table rows.
The format for doing this is:
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td>one</td>
</tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
How can I do ng-repeat over the entire block listed above?
I tried doing
<tr ng-repeat="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
<td>one</td>
</tr>
<tr ng-repeat="x in colors track by $index">
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1{{$index}}">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
But this way the rows don't expand right under the one that is clicked. Also, I'm having to do two loops. How can I do this all in one loop?
To iterate over both <tr> tags, use ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="x in colors track by $index" data-toggle="collapse" data-target="#demo1{{$index}}" class="accordion-toggle">
<td>one</td>
</tr>
<tr ng-repeat-end>
<td class="hiddenRow">
<div class="accordian-body collapse" id="demo1{{$index}}">
<table class="table table-striped">
<thead><tr><td>Test for row one</td></tr></thead>
<tbody><tr><td>Testing</td></tr></tbody>
<table>
</div>
</td>
</tr>
A good guide to ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
ng-repeat-start and ng-repeat-end work great!
I complemented with angular code for hide/show accordion instead of data-toggle/data target to toggle a css:
ng-repeat-start="customer in customers track by $index" ng-click="toggle = !toggle" ng-class="{'open' : toggle}"
where
$scope.toggle = 'open';