I am displaying template to show it on monitor.
I have designed layout like this:
But I want to display like this (to save the space):
My code looks like this :
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.businessObject =
[
{
CompanyName: "AA",
StockWaringItemsCount: 0,
Items: [
{
ToolNumber: "200", ItemName: "Item 1 GREY", UOM: "PCs", MinStockLevel: 100, Stock: 5000
}
]
},
{
CompanyName: "BB",
StockWaringItemsCount: 1,
Items: [
{ ToolNumber: "111", ItemName: "Item 1", UOM: "", MinStockLevel: 200, Stock: 150 },
{ ToolNumber: "222", ItemName: "Item 2", UOM: "", MinStockLevel: 300, Stock: 400 },
{ ToolNumber: "333", ItemName: "Item 3", UOM: "", MinStockLevel: 400, Stock: 200 },
]
},
{
CompanyName: "AutoLive",
StockWaringItemsCount: 1000,
Items: [
{ ToolNumber: "111", ItemName: "Item 222", UOM: "", MinStockLevel: 500, Stock: 5000 },
{ ToolNumber: "222", ItemName: "Item 444", UOM: "", MinStockLevel: 600, Stock: 5000 },
{ ToolNumber: "333", ItemName: "Item 252", UOM: "", MinStockLevel: 700, Stock: 5000},
]
}
];
});
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body ng-controller="myCtrl">
<div class="container">
<div ng-repeat="company in businessObject" class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
{{company.CompanyShortID}}
<div class="pull-right">
<div ng-show="company.StockWarnigItemsCount>0">
<span class="badge" style="color: Red">{{company.StockWarnigItemsCount}}</span>
</div>
<span class="glyphicon glyphicon-ok-circle" ng-show="company.StockWarnigItemsCount===0">
</span>
</div>
<div class="clearfix">
</div>
</div>
<div class="panel-body">
<table class="table table-condensed" style="margin-bottom: 0px;">
<thead>
<tr>
<th>
Tool
</th>
<th style="width: 60%">
Item
</th>
<th style="text-align: center">
Min
</th>
<th style="text-align: center">
Stock
</th>
<th style="text-align: center">
Status
</th>
</tr>
</thead>
<tr ng-repeat="item in company.Items">
<td>
{{item.ToolNumber}}
</td>
<td>
{{item.ItemName}}
</td>
<td style="text-align: right">
{{item.MinStockLevel}}
</td>
<td style="text-align: right">
{{item.Stock}}
</td>
<td style="text-align: center">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
i am using angularjs with bootstrap.
Any help would be greatly appreciated.
Add float: left to the CSS of these elements.
However, it will still depend on the order of the elements if they will appear the way you showed it (you might have to change the order - in this case the order is top let, lower left, topright, lower right)
removed ng-repeat.
I have used masonry jquery. appended items dynamically(as mentioned in masonry document). Now it is working perfectly fine!..
Related
I have already made a table but now i want to make another table below.In that table, the table data will be the same as before (all the row column data will be same) for that i included a js file in my project
i used ajax where i can get instant result.So here is my js code :
var dataTable;
$(document).ready(function () {
loadDataTable();
});
function loadDataTable() {
dataTable = $('#DT_load').DataTable({
"ajax": {
"url": "/api/book",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Name", "width": "30%" },
{ "data": "Author", "width": "30%" },
{ "data": "ISBN", "width": "30%" },
{
"data": "id",
"render": function (data) {
return `<div class= "text-center">
<a href="/BookList/Edit?id=${data}" class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;'>Edit</a>
#nbsp
<a class='btn btn-success text-white' style= 'cursor:pointer; width: 100px;' onClick=Delete('/api/book?id='+${data})>Delete</a>
</div>`
"width" : "30%"
},
}
],
"language": {
"emptyTable": "No Data Found"
},
"width": "100%"
})
}
function Delete(url) {
swal({
title: "Are You Sure?",
text: "Once Deleted You cant never Find it again !",
icon: "warning",
dangerMode: true
}).then((willDelete) => {
if (willDelete) {
$.ajax({
type: "DELETE",
url: url,
success: function (data) {
if (data.success) {
toastr.success(message);
dataTable.ajax.reload();
}
else {
toastr.error(message);
}
}
});
}
});
}
The table i made with html css its showing but when i add this js file it should show me the duplicate table i made before.But its not working
Here is my index file:
#page
#model Crud_App.indexModel
<br />
<div class="container row p-0 m-0">
<div class="col-7">
<h2 class="text-info">Book List</h2>
</div>
<div class="col-3">
<a class="btn btn-info form-control text-center" asp-page="create">Create</a>
</div>
<div class="col-12 border p-3 mt-3">
<form method="post">
#if (Model.Books.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label asp-for="Books.FirstOrDefault().Name"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().Author"></label>
</th>
<th>
<label asp-for="Books.FirstOrDefault().ISBN"></label>
</th>
</tr>
#foreach (var item in Model.Books)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Author)
</td>
<td>
#Html.DisplayFor(m => item.ISBN)
</td>
<td>
<a asp-page="Edit" asp-route-id="#item.Id" class="btn btn-success btn-sm">Edit</a>
<button asp-page-handler="Delete" asp-route-id="#item.Id" onclick="return confirm('Are you Sure You want to delete')" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
}
</table>
}
else
{
<p>No Books Available</p>
}
</form>
</div>
<div class="col-12" style="text-align: center">
<br />
<span class="h3 text-info">OR</span>
<br/>
<div class="col-12 border p-3">
<table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Atuhor</th>
<th>ISBN</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
#section scripts {
<script src ="~/js/BookList.js"></script>
}
I did it like this,
In DataTable, I added
dataSrc
columnDefs
In HTML, I added
4th table header
In backend controller, I am returning a named array booksData on DataTable ajax call
#section scripts {
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#DT_load').DataTable({
"ajax": {
"url": "https://localhost:44333/Home/Data",
"type": "GET",
"datatype": "json",
"dataSrc": "booksData"
},
"columns": [
{ "data": "name", "width": "30%" },
{ "data": "author", "width": "30%" },
{ "data": "isbn", "width": "30%" },
{ "data": "id", "width": "10%" }
],
"columnDefs": [
{
"targets": 3,
"data": "id",
"render": function (data) {
return 'Download';
}
}
],
"language": {
"emptyTable": "No Data Found"
},
"width": "100%"
});
});
</script>
}
#if (Model.Count() > 0)
{
<table class="table table-striped border">
<tr class="table-secondary">
<th>
<label>#Model.First().Name</label>
</th>
<th>
<label>#Model.First().Author</label>
</th>
<th>
<label>#Model.First().ISBN</label>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(m => item.Name)
</td>
<td>
#Html.DisplayFor(m => item.Author)
</td>
<td>
#Html.DisplayFor(m => item.ISBN)
</td>
<td>
<a asp-route-id="#item.Id" class="btn btn-success btn-sm">Edit</a>
</td>
</tr>
}
</table>
<div class="col-12" style="text-align: center">
<br />
<span class="h3 text-info">OR</span>
<br />
<div class="col-12 border p-3">
<table id="DT_load" class="table table-stripped table-bordered" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Atuhor</th>
<th>ISBN</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
}
else
{
<p>No Books Available</p>
}
public class HomeController : Controller
{
public IActionResult Index()
{
var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};
return View(books);
}
public IActionResult Data()
{
var books = new List<Book> { new Book { Id=1, Name="Abcd", Author="Xyz", ISBN="1234" },
new Book { Id=2, Name="Efgh", Author="Igm", ISBN="7896" },
new Book { Id=3, Name="Qrty", Author="Ght", ISBN="8791" },};
return Json(new { booksData = books });
}
My application uses Angular 8 with Bootstrap and chart.js. I trying to render a bootstrap popup in an Angular ng-template directive. The popup (graph) is shown as soon as the user clicks in the last column in a table row. But as you can see on the picture, there is a white background, half the size of the actual graph. How can I get rid of this backgound ?
html part
<tbody>
<tr *ngFor="let stock of stockList; index as i" (click)="displaySelected(stock);">
<td style="width: 30px" scope="row">{{ i + 1 }}</td>
<td style="width: 40px">{{ stock.id }}</td>
<td style="width: 70px">{{ stock.symbol }}</td>
<td style="width: 70px">{{ stock.isin }}</td>
<td style="width: 180px">{{ stock.name }}</td>
<td style="width: 40px">{{ stock.liquid }}</td>
<td [class]="getFlagClass(stock.countryCode)" style="width: 14px"></td>
<td style="width: 180px">{{ stock.exchangeName }}</td>
<td style="width: 180px">{{ stock.sector }}</td>
<td style="width: 50px">{{ stock.active }}</td>
<td style="width: 30px"><img src="assets/img/chart.png" height="30" width="30" (click)="displayChart(content, stock);"/></td>
</tr>
</tbody>
</table>
</div>
<ng-template #content let-modal>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[name]</h5>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="myChart" width="1000" height="500"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">any action</button>
</div>
</div>
</div>
</ng-template>
Component part
displayChart(content, stock: Istock) {
// Open popup window
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
const today = new Date();
const dd = today.getDate();
const mm = today.getMonth();
const yyyy = today.getFullYear();
const dateTo: Date = new Date(yyyy, mm, dd);
const dateFrom: Date = new Date(yyyy - 1, mm, dd);
// retrieve dates and Prices
this.labelsDate = new Array();
this.dataPrices = new Array();
this.http.post(this.apiUrl + '/instrument/getPrices', {id: stock.id, from: dateFrom, to: dateTo } ).subscribe( (result: IinstrumentPrice[]) => {
result.forEach(x => {
this.labelsDate.push(x.date);
this.dataPrices.push(x.close);
});
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
// display chart
const myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: this.labelsDate,
datasets: [{
label: 'Daily prices',
data: this.dataPrices,
fill: false,
borderWidth: 2,
borderColor: 'black'
}]
},
options: {
elements: { point: { radius: 0 } },
responsive: false,
display: true
}
});
});
}
css part
.row-input {
font-size: 15px;
padding-top: 2px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 2px;
}
input {
font-size: 15px;
}
.flag-us {
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
position:relative;
display:inline-block;
width:1.33333333em;
line-height:1em;
background-image:url(../../assets/img/flags/united-states-of-america.png);
}
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
The solution is to set a parameter {"size: 'xl'} in the open method.
displayChart(content, stock: Istock) {
// Open popup window
this.modalService.open(content, {size: 'xl'}).result.then((result) => {
and the html is also changed
<ng-template #content let-modal>
<div class="modal-header">
<div class="row">
<div class="col-sm-6">
<h4 class="modal-title">{{instrumentName}}</h4>
</div>
<div class="col-sm-8">
<div>last trading day : {{lastTradingDay}}</div>
</div>
</div>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="myChart" width="1000" height="500"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>
I use vueJS to display a table data,when I click the delete button, the table always delete the last row,rather not a specific row.I use my custom UIComponent 'lovTable',it changes a input element to another style,how to avoid it and make the data and page change the same way.Here's the code.Tks.
<script>
//服务类型下拉列表数据转化
var mServiceTypeData = $.map(serviceTypeData, function (obj) {
obj.id = obj.value;
obj.text = obj.meaning;
return obj;
});
$(function(){
var vm = new Vue({
el: '#div-rms-memo',
data: {
sub:[]
},
methods:{
//添加子项目
addSubProject:function () {
vm.sub.push({
subPrjServeType:'',
subPrjBelongToDept:'',
});
},
//移除当前行的子项目
removeCurrentRow:function(index){
var $del=vm.sub.splice(index,1);
},
}
});
function renderLines(el, lineIndex){
//渲染select2
$("#subPro"+lineIndex).find(".subPrjServeType").select2Ext({
placeholder: '请选择服务类型',
data: mServiceTypeData,
width:150
}).on('change', function () {
vm.sub[lineIndex].subPrjServeType = $(this).val();
});
//归属部门LOV
$("#subPro"+lineIndex).find(".subPrjBelongToDept").lovTable({
title:'归属部门',
placeholder:'请选择',
valueField:'unitId',
textField:'unitName',
query:[
{
text:'部门ID',
name:'unitId'
},
{
text:'部门名称',
name:'unitName'
}
],
rowSelected:function(row){
vm.sub[lineIndex].subPrjBelongToDept=row.unitId;
},
textClear:function(){
vm.sub[lineIndex].subPrjBelongToDept = "";
}
},{
url : '${base.contextPath}/project/prjBranchView/queryConditionPage?'+_header+'='+_token,
columns: [{
title:'部门ID',
field:'unitId'
},{
title:'部门名称',
field:'unitName'
}]
});
}
Vue.directive('line-bind', {
bind: function (el, binding) {
var lineIndex = binding.value;
console.info('binding index='+lineIndex)
vm.$nextTick(function () {
renderLines(el,lineIndex);
})
},
unbind:function(el,binding){
vm.$nextTick(function () {
for(var i=0;i<vm.sub.length;i++){
renderLines(vm.sub[i],i);
}
})
}
});
})
</script>
<div class="content-wrapper">
<section class="content">
<div id="div-rms-memo" >
<div class="box box-blue">
<div class="form-group">
<a href="javascript:void(0)" class="btn btn-crm" v-on:click="addSubProject">
<span class="glyphicon glyphicon-plus">添加</span>
</a>
</div>
<table align="center" class="table table-bordered" v-line-bind="index" v-for="(el,index) in sub" :id="'subPro'+index" :cindex="index">
<tr class="crm-title">
<td align="center" valign="middle" rowspan="2" style="width:5%;">
<a href="javascript:void(0)" class="btn btn-default btn-xs removeSubPrj" id="removeSubPrjBtn" v-on:click="removeCurrentRow(index)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</td>
<td align="center" style="width:15%;"class="required">服务类型</td>
<td align="center" style="width:15%;"class="required">归属部门</td>
<td align="center" style="width:15%;" class="required">人天</td>
</tr>
<tr>
<td align="center">
<input type="text" id="subPrjServeType" v-model="el.subPrjServeType" class="form-control input-sm subPrjServeType"/>
</td>
<td align="center">
<input type="text" class="form-control input-sm subPrjBelongToDept" v-model="el.subPrjBelongToDept">
</td>
<td align="center">
<input type="number" class="form-control input-sm subPrjPeoplePerDay" v-model="el.subPrjPeoplePerDay">
</td>
</tr>
</table>
</div>
</div>
</section>
</div>
I have a table generated from ng-repeat. Each of the row has a checkbox. I want the rows which are checked to change their background color. I was trying it using ng-class but did not help, As soon as I select one checkbox, all the rows get their background changed.I understand what the mistake is, but dont know how to solve it.
This is my table
<table >
<tr>
<th>Select</th>
<th>Job List</th>
<th>Next Firing</th>
</tr>
<tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
<td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
<td style="width: 247px; ">{{ x.Name }}</td>
<td style="width: 247px; ">{{ x.ID }}</td>
</tr>
</table>
This is my controller
$scope.countChecked = function(index){
var count = 0;
angular.forEach($scope.jobs, function(job){
if (job.checked) {
count++;
$scope.myclass='selected';
}
});
return count;
}
I need the "count" for a different purpose, which is working fine.
This is selected css
.selected{
background-color: #DEB887;
}
You can use the ngClass directive to give it a certain class when a job is selected like so:
<ANY ... ng-class="{ 'selected': x.checked }">
...
</ANY>
Just go through below snippet.
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, $filter) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
}
];
$scope.checkedCount = function() {
return $scope.Customers.filter(function(orders) {
return orders.select;
}).length;
}
})
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.selected {
background-color: #E0F7FA;
}
</style>
</head>
<body style="margin: 30px;">
<div ng-app="MyApp" ng-controller="MyController">
<div class="container-fluid" style="margin-top: 40px;">
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<span style="font-size: 20px; margin-right: 50px;">Total Checked : {{checkedCount()}}</span>
</div>
</div>
<div class="col-md-12">
<table class="table table-condensed table-bordered text-center">
<thead style="background-color: #607D8B; color: white">
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr ng-class="{ 'selected': c.select }">
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I have a quite dynamic table where you can hide and show different columns (and also change the order on the columns).
I've tried a few directives and plugins but no one is working well (or as I expect...I am doing wrong) for me.
Can you guys help me to get the table header fixed?
plnkur
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/slate/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<p>Visible Columns:</p>
<div class="cbxList" ng-repeat="column in columnsTest">
<input type="checkbox" ng-model="column.checked">{{column.id}}
</div>
<br/>
<table border="1" class="table table-striped table-hover table-responsive table-bordered">
<thead style="font-weight: bold;">
<tr>
<th ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="row[column.id]"></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.columnToggled = function(column) {
$('[data-col-id="' + column.id + '"]').each(function() {
var element = this;
if ($(element).hasClass('ng-hide')) {
$(element).removeClass('ng-hide');
} else {
$(element).addClass('ng-hide');
}
});
};
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}]; //and so on..
});
</script>
</body>
</html>