angularjs ng-repeat in a modal with ng-if - javascript

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.

Related

Bootstrap table using 'checkAll' method only checks the checkboxes in the current page

I have a bootstrap table in my HTML5 page.
When using $('#bk-table').bootstrapTable('checkAll')
Only the checkboxes in current page r checked.
How could I check all the checkboxes in all page?
My bootstrap table:
<form>
{% csrf_token %}
<table contenteditable='true' class="table table-bordered table-xl" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-export="true"
data-height="1650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" name="checkbox" class="data-checkbox" id="data-checkbox" data-checkbox="true" ></th>
<th class ='courseCode' data-field="courseCode" data-formatter="renderCourse">Course Code</th>
</tr>
</thead>
</table>
</form>
My button event:
<button class="button" type="button" onclick="select_all();">Select All</button>
<script>
function select_all()
{
$('#bk-table').bootstrapTable('checkAll')
}
</script>
bootstrapTable('checkAll') is for Check/Uncheck all current page rows. For selecting all the pages, first you load data let data = $("#bk-table").bootstrapTable('getData'); and iterate though data object & update the id field state (because data-field="state" for check box) value to true in the object array data then you reload table with your updated data $('#bk-table').bootstrapTable('load', data);
Please find sample updated data object array:
data = [{"id":1,"courseCode":"Item 1","state":true},{"id":2,"courseCode":"Item 2","state":true},{"id":3,"courseCode":"Item 3","state":true}];
function select_all()
{
let data = $("#bk-table").bootstrapTable('getData'); //getting table data
for(let i=0;i<data.length;i++){
data[i]['state'] = true;
}
$('#bk-table').bootstrapTable('load', data); //reloading table data after updation
}
<button class="button" type="button" onclick="select_all();">Select All</button>
up votes will be appreciated!

How can i auto filter on javascript laravel?

I don't want to redirect page when I want to filter the table so how can I make it in javascript?
this is my javascript
javascript
document.getElementById('inputdismissal').value = programId
$('#modalAddDismissal').modal("show",function(){
$('#inputdismissal').val(programId).trigger('change');
$('#inputdismissal').change(function(){
//fire your ajax call
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
})
})
and i have this modal,
modal.php
<div class="modal-header">
<input class="form-control" id="inputdismissal" type="text" readonly/>
</div>
<div class="modal-body">
<table id="tblDisNikName" class="table table-sm table-responsive table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Select</th>
<th scope="col">NIK</th>
<th scope="col">Nama</th>
<th scope="col">Position</th>
<th scope="col">Program</th>
</tr>
</thead>
<tbody id="myTable" class="cursor-pointer">
#foreach($dismissalcrew as $datadis)
<tr>
<td><input class="dismissalTest" type="checkbox"></td>
<td>{{$datadis->employee_nik}}</td>
<td>{{$datadis->employee_nama}}</td>
<td>{{$datadis->crewprogramposition_name}}</td>
<td>{{$datadis->show_name}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
I already get my value into inputDismissal and show up on my modal. but the table didn't get filtered at all, how can I just show filtered table when I call the modal using inputDismisal, I mean getting filtered automatically as I call the modal
SO its basically very simple, i just use jquery and put the value
function filterInput(programId){
$(document).ready(function(){
var value = programId.toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
$('#modalAddDismissal').modal("show")
}
just put the modal after the filter and it's work

Show only one element of a panel using Angularjs

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" ... >

Table disappears after adding an item

i'm using datatables to display a list of project names and I'm using a button to add an item to the displayed array, but when i do so, my table disappears.
Here's the code:
view.html
<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: #00b3ee; color: white; border:none">
<th style="text-align: center">Nom</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in vm.project.projects">
<td style="width: 90%; vertical-align: middle">{{project}}</td>
<td align="center" style="vertical-align: middle">
<button data-toggle="modal" ng-click="vm.setProject(project)"
data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
<i class="fa fa-trash"> </i>Supprimer
</button>
</td>
</tr>
</tbody>
</table>
controller.js
vm.add = () => vm.project.projects.push('new project');
fetchProject().then(result => {
vm.project = result;
// vm.project = {
// projects: [
// "project1",
// "project2",
// "project3",
// "project4"
// ],
// etc...
// }
vm.project.projects.push("newProject"); //it's working here, which is normal
//init datatable
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap();
vm.dtColumnDefs = [];
for (var i = 0; i < 2; i++) {
if (i == 1) {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
} else {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
}
}
})
I've tried using objects instead of strings.. doesn't work either. I don't know what's going on.
I cannot use server side processing. This has to be done using the angular way.
Ok, so i found it :
For some reason, it worked when i initialized vm.project.project before the promise call. So i created the vm.project object, and i added the project property to it by adding an empty array. I was then able to add items without having my table disappearing.

How to populate table based on button click

I have a table which contains some data about car makes.
It looks like this:
Now in the table appears data for all makes, but I need to show data only for the make that I've clicked. For example if I click on Audi to show data only for this make.
This is my view where I have populated the table:
<div class="row">
#{var testList = Model.ProductMatchingVehicles.GroupBy(p => p.Make.Name).ToList(); foreach (var item in testList) {
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction()">#item.Key</div>
} }
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr>
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
</table>
</div>
</div>
Can you please advise me how to achieve this in javascript or jquery? Thanks!
You can try with following code:
1) Modify <tbody> as follows:
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr class="vehicle_rows" data-refId="#item.Key">
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
Here we have added the class and data-refId attribute to each <tr>
2) Modify the button click function a bit:
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction(this)">#item.Key</div>
Here passing this reference to function
3) The function myFunction will have logic something like this:
function myFunction(obj){
var $button = $(obj);
var car_make = $button.data("id"); //reading the data-id of clicked button
//hide all rows first
$(".vehicle_rows").hide();
//show only currenly clicked buttons associated rows
$(".vehicle_rows[data-refId="+car_make+"]").show();
}

Categories