I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >
Related
I have the JSON of single object coming as:
I achieved this data by calling the API in component.ts file which is as follows
/* for auditgorup selecitonm */
this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
.subscribe((datas: any[]) => {
this.auditSelection = datas;
console.log(this.auditSelection);
// You'll have to wait that changeDetection occurs and projects data into
// the HTML template, you can ask Angular to that for you ;-)
this.chRef1.detectChanges();
// Now you can use jQuery DataTables :
const tables: any = $('#nepal');
this.dataTable = tables.DataTable();
});
The view is as follows
<table id="nepal" class="table table-bodered">
<thead>
<tr>
<th>Selection No</th>
<th>SelectionDate</th>
<th>SelectedBy</th>
<th>PanEximNumber</th>
<th>Name</th>
<th>Address</th>
<th>PhoneNumber</th>
<th>SelectionType</th>
<th>Group Desc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let nas of auditSelection">
<td>{{nas.selectionId}}</td>
<td>{{nas.selectionDate}}</td>
<td>{{nas.selectedBy}}</td>
<td>{{nas.panEximNumber}}</td>
<td>{{nas.name}}</td>
<td>{{nas.address}}</td>
<td>{{nas.phoneNumber}}</td>
<td>{{nas.selectionType}}</td>
<td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td>
</tr>
</tbody>
</table>
At this last line of <td>{{nas.assignmentAudit.auditorGroup.groupDesc}}</td> I cannot get the required value.
The output display should be "g1".
I am unable to comment, so adding it over here. assignmentAudit is an array, so try accessing using index
As per the analysis of the JSON structure the assignmentAudit is an array
so you can only access it with the index positions.
If you are sure the assignmentAudit is an array with single value then you can use
<td>
{{nas.assignmentAudit[0].auditorGroup.groupDesc}}
</td>
If assignmentAudit has multiple values and is not deterministic you can try
<td>
<span *ngFor="let assignmentAudit of nas.assignmentAudit">
{{assignmentAudit.auditorGroup.groupDesc}}
</span>
</td>
nas.assignmentAudit[0].auditorGroup.groupDesc
That would work. The section you are trying to access is an array. So picking the first index would then make it defined
groupDesc is insideauditorGroup loop so you cannot do like to get value inside loop. Try like that.
<!-- Angular -->
<ul>
<li *ngFor="let item of nas.assignmentAudit.auditorGroup;">
</li>
</ul>
or <td>{{nas.assignmentAudit.auditorGroup[0].groupDesc}}</td>
Pre-info
I try to sperate Admin and customer in a different stage or view.
so that, admin can modify the table before releasing it to customers.
Questions
In the table -> td there is button to control the staging, release(show) or revert (hide)?
so basically what I wanna do is that every table checked can be shown on the both in admin and customer. if it's unchecked, the data only show to admin.
Currently, the code is disabled whole table-body instead of 1 row.
is there any way to check or uncheck only 1 row?
thanks for the advice.
$scope.showDiv = isAdmin();
$scope.toggleShowDiv = function () {
$scope.showDiv = !isAdmin()&isAdmin();
console.log('fired');
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<thead>
<tr>
<th style="width: 80px">foo1</th>
<th style="width: 80px">foo2</th>
<th style="width: 200px">foo3</th>
<th>foo4</th>
<th>foo5</th>
<th>foo6</th>
</tr>
</thead>
<tbody class="auction-group" ng-repeat="a in foos" ng-if="showDiv">
<tr>
<td>abcd1</td>
<td>abcd1</td>
<td>abcd1</td>
<td>abcd3</td>
<td>abcd4</td>
<td>abcd5</td>
//is admin - show only to admin
<td ng-if="::isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
</tr>
</tbody>
Take your first ng-if outside ng-repeat
<div ng-if="showDiv">
<tbody class="auction-group" ng-repeat="a in foos">
</div>
second ng-if should be like this,
<td ng-if="isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .
Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.
I'm trying to use jQuery to capture the value of two cells from a table. My table looks like this:
<table id="searchByLocationResults" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">View Detail</th>
<th scope="col">Quantity</th>
<th scope="col" style="display:none;">Location ID</th>
<th scope="col" style="display:none;">Item Type ID</th>
</tr>
#For Each item In Model
Dim currentItem = item
#<tr>
<td><a class="btn btn-default btn-sm" onclick="viewDetails(this)">View Detail</a></td>
<td>
#Html.DisplayFor(Function(modelItem) currentItem.COUNT)
</td>
<td style="display:none;" class="locationID">
#Html.DisplayFor(Function(modelItem) currentItem.Unique_Location_ID)
</td>
<td style="display:none;" class="itemType">
#Html.DisplayFor(Function(modelItem) currentItem.Item_Type_Identifier)
</td>
</tr>
Next
</tbody>
</table>
As you can see there is a 'view details' button on each row. What I need to do is capture the display:none values in the cells with class=locationID and class=itemType when the button is clicked, only for the row that the button is clicked on. I have seen multiple solutions on stack over flow here, here and quite a few others. Most of these are dealing with capturing an entire row of values.
I have tried a few different scripts:
function viewDetails(clickedRow) {
var locationID = $(this).find(".selected td:.locationID").val();
alert(locationID);
and:
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").val();
alert(locationID);
as well as a few others.
How do you capture the values of the cells locationID and itemType for the row that 'View Details' is clicked on?
I would say to try the index. This only works if the buttons and text areas have unique classes so the count works correctly. Then once you have the index use the eq() to get the data.
var index = $(".btn-sm").index();
var locationId = $(".locationID").eq(index).text();
You are almost there. You just need to use the .text() method in Jquery
function viewDetails(clickedRow) {
var locationID = tr.find(".locationID").text();
alert(locationID);
I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.
If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">
Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.