i have an array like so :
TestingTable : [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
]
I want to use the above array and create a div table like this :
So far ive tried it this way but its not coming the way i want it to ..
<h3>Testing</h3>
<div class="rTable" ng-if="show" ng-repeat="item in TestingTable">
<div class="rTableRow">
<div class="rTableHead"><strong></strong>
</div>
<div class="rTableHead" ng-repeat="test in item.EnvironmentTypes"><span style="font-weight: bold;">{{test.Name}}</span>
</div>
</div>
<div class="rTableRow" ng-repeat="environ in item.TestingType">
<div class="rTableHead"><span style="font-weight: bold;">{{environ.Name}}</span>
</div>
<div class="rTableCell" ng-repeat="test in item.EnvironmentTypes">
<input type="text" ng-model="result">
</div>
</div>
</div>
How should i use the ng repeat in order to get the two tier table in the picture?
angular.module('app', [])
.controller('ctrl', ['$scope', function($scope) {
$scope.TestingTable = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
}])
table, th, td {
border: 1px solid #2b91d6;
border-collapse: collapse;
}
thead tr{
background-color:#97cff5;
text-align:center;
}
td{
width:130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<td></td>
<td ng-repeat='item in TestingTable[1].EnvironmentTypes'>{{item.Name}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in TestingTable[0].TestingType'>
<td style='text-align:right'>{{item.Name}}</td>
<td ng-repeat='x in TestingTable[1].EnvironmentTypes'></td>
</tr>
</tbody>
</table>
</div>
See this solution
In your template file
<body ng-controller="MainCtrl">
<table>
<tr>
<th></th>
<th ng-repeat="item in data[1].EnvironmentTypes">{{item.Name}}</th>
</tr>
<tr ng-repeat="item in data[0].TestingType">
<td>{{item.Name}}</td>
<td ng-repeat="item1 in data[1].EnvironmentTypes"></td>
</tr>
</table>
</body>
In your controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = [
{TestingType:[
{Id:1,Name:"Functional Testing"},
{Id:2,Name:"Regression Testing"},
{Id:3,Name:"Integration"},
{Id:4,Name:"BVT"}]
},
{EnvironmentTypes:[
{Id:1,Name:"Dev/QE (VCD)"},
{Id:2,Name:"Staging"},
{Id:3,Name:"PPE"},
{Id:4,Name:"01's"}]
}
];
});
Related
I am using a Vue.js directive:
https://vue-dragscroll.donfalcon.com/
Which makes a block be grabbed with click when it is overflowed.
As I used it in a table, so I should make the table display block. Everything is OK when I have a lot of fields. But when my fields are two or three, all fields will be shown in the left like first one.
I need to have the fields like the second one.
// import { dragscroll } from 'vue-dragscroll'
var app = new Vue({
el: '#app',
data() {
return {
headers: [
{ name: 'header1', label: 'label1'},
{ name: 'header2', label: 'label2'},
{ name: 'header3', label: 'label3'}
],
values: [
['sample11', 'sample12', 'sample13'],
['sample21', 'sample22', 'sample23'],
['sample31', 'sample32', 'sample33']
]
}
},
directives: {
// dragscroll
}
})
var app = new Vue({
el: '#app2',
data() {
return {
headers: [
{ name: 'header1', label: 'label1'},
{ name: 'header2', label: 'label2'},
{ name: 'header3', label: 'label3'}
],
values: [
['sample11', 'sample12', 'sample13'],
['sample21', 'sample22', 'sample23'],
['sample31', 'sample32', 'sample33']
]
}
},
directives: {
// dragscroll
}
})
div {
background-color: gray;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="w-100">
<table
v-dragscroll.x
class="d-block w-100 overflow-auto"
>
<thead>
<tr>
<th v-for="th in headers">{{th.label}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in values">
<td v-for="value in row">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div id="app2" style="width: 100%;">
<table
class="w-100 overflow-auto"
>
<thead>
<tr>
<th v-for="th in headers">{{th.label}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in values">
<td v-for="value in row">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
How can I have both together?
I'm trying to export a painted html table completely dynamically into a csv file. I tried to implement several Scripts, functions.etc but I have not obtained the desired result. If anyone can help me, I'd be very grateful.
The information in the table is loading from a Request in "jsonData", It is important to clarify that I do not require to know the "Headers", only the information inside the table body:
ts Code:
jsonData:any;
_object = Object;
"jsonData" looks like:
[{
Subject_ID: "ACCT101",
First_Available_Date: "01/01/01",
....
},
{
Subject_ID: "510862185-X",
First_Available_Date: "06/04/19"..}....
]
HTML
<table>
<thead>
<tr>
<th *ngFor="let header of _object.keys(jsonData[0]); let i = index">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of jsonData; let i = index">
<td *ngFor="let objKey of _object.keys(row); let j = index">{{ row[objKey] }} </td>
</tr>
</tbody>
</table>
<button class="btn btn-submit btn-sm float-right" type="submit" (click)="export()">
Submit
</button>
Please try below code. this will extract data from table and download as csv.
<!DOCTYPE html>
<html>
<head>
<style>
td, table,th{
border: solid 1px black;
}
</style>
</head>
<body>
<table id="data_table">
<thead>
<tr>
<th>Subject_ID</th>
<th>First_Available_Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCT101</td>
<td>01/01/01</td>
</tr>
<tr>
<td>510862185-X</td>
<td>06/04/19</td>
</tr>
<tr>
<td>New data</td>
<td>New data 1</td>
</tr>
</tbody>
</table>
<script>
function exportit() {
var csv='';
table=document.getElementById("data_table");
tr=table.children[0].children[0];
for(i=0;i<tr.children.length;i++)
{
csv+=tr.children[i].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
tbody=table.children[1];
for(i=0;i<tbody.children.length;i++)
{
for(j=0;j<tbody.children[i].children.length;j++)
{
csv+=tbody.children[i].children[j].innerText+",";
}
csv=csv.substring(0,csv.length-1)+"\n";
}
csv=csv.substring(0,csv.length-1)+"\n";
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'data.csv';
hiddenElement.click();
}
</script><br>
<button onclick="exportit()">export</button>
</body>
</html>
I have a table on a page and retrieving and displaying contents using datatables. But the columns are not aligned to the center. This is how it looks right now. Click Here
. This is how I am creating the table
$(document).ready(function() {
manageMemberTable = $("#manageMemberTable").DataTable({
"ajax": "php_actionsms/retrieve.php",
"order": [[0,'desc']]
});
Html Code :
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Accident Report Records</small> </h1></center>
<div class="removeMessages"></div>
<br /> <br /> <br />
<table class="table table-responsive " id="manageMemberTable">
<thead>
<tr>
<th>ID</th>
<th>Recipient</th>
<th>Recipient Number</th>
<th>Place</th>
<th>Officer</th>
<th>Date&Time</th>
<th>Sent to Icer</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
add this when defining datatables:
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
add this to your CSS:
th.dt-center, td.dt-center { text-align: center; }
Trying to run a function in a clientside controller file using ng-click on a button in my HTML. Getting nothing and not sure why. All help appreciated.
HTML
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="criminals in criminals.criminalArray">
<strong>{{criminals.name}}</strong> <em>{{criminals.location}}</em>
<span class="status {{criminals.status}}">{{criminals.status}}</span>
<button ng-click="criminals.criminalsDelete(criminal)" class="delete">X</button>
</li>
</ul>
CONTROLLER
vm.criminalsDelete = criminalsDelete;
function criminalsDelete(criminal) {
console.log('ng-click');
$http.delete(`http://localhost:4000/api/criminals/${criminal.id}`)
.then(() => {
const index = vm.criminalArray.indexOf(criminal);
vm.criminalArray.splice(index, 1);
});
}
The criminals name for the controllerAs syntax is being hidden by the criminals name for the ng-repeat iterator. Use something else for the iterator:
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="perp ̶c̶r̶i̶m̶i̶n̶a̶l̶s̶ in criminals.criminalArray">
<strong>{{perp.name}}</strong> <em>{{perp.location}}</em>
<span class="status {{perp.status}}">{{perp.status}}</span>
<button ng-click="criminals.criminalsDelete(perp)" class="delete">X</button>
</li>
</ul>
This form of code the controller for delete is best
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
I made a Complete CRUD for you for an example, you only have to put the http services.
See the snippet below.
angular.module('App', []).controller('CrudCriminal', ['$scope',
function($scope) {
$scope.Criminals = [
{
name : "walter",
location : "abq",
status : "dead",
editable : false
},
{
name : "Jesse",
location : "nebraska",
status : "out",
editable : false
}
];
$scope.entity = {}
$scope.edit = function(index){
$scope.entity = $scope.Criminals[index];
$scope.entity.index = index;
$scope.entity.editable = true;
}
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
$scope.save = function(index){
$scope.Criminals[index].editable = false;
}
$scope.add = function(){
$scope.Criminals.push({
name : "",
location : "",
status : "",
editable : true
})
}
}
]);
/* Styles go here */
body{
margin:10px;
font-size:14px;
font-family:Arial;
}
table{
border:1px solid #333;
border-collapse:collapse;
width:100%;
}
table tr td{
border:1px solid #333;
padding:10px;
}
table tr td span{
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App">
<div ng-controller="CrudCriminal">
<h1>Infamous Criminals</h1>
<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Status</td>
<td><span ng-click="add()">Add New</span></td>
</tr>
<tr ng-repeat="criminal in Criminals">
<td>
<input type="text" ng-model="criminal.name" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.name }}</span>
</td>
<td>
<input type="text" ng-model="criminal.location" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.location }}</span>
</td>
<td>
<input type="text" ng-model="criminal.status" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.status }}</span>
</td>
<td>
<span ng-click="edit($index)" ng-hide="criminal.editable">Edit</span>
<span ng-click="save($index)" ng-show="criminal.editable">Save</span>
<span ng-click="delete($index)"> | Delete</span>
</td>
</tr>
</table>
</div>
</body>
</html>
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO