first of all: I know a similar question was already asked, several times. I read and tried the suggested solutions and they work in favor of the error message of my IDE.
But if I add the style to the header -like solutions suggest-, it will no longer work for my bootstrap button.
<style>.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}</style>
If I inline the code it works.
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal" data-target="#myModal" data-th-id="${person.getId()}" style="outline:none;box-shadow:none;">
If I add the style to the body, it also applies the effect I want.
So I am interested how to make this W3C conform and working without inlining it.
This is how it works but complaining IDE
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>
<!-- start header -->
<!-- Fixed navbar -->
<div th:replace="template :: navbar"></div>
<!-- end header -->
<!--- start table -->
<div class="container">
<div>
<style>.btn:focus, .btn:active {
outline: none !important;
box-shadow: none !important;
}</style>
</div>
<br>
<h3>Overview</h3>
<br>
<div class="container">
<div class="col-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
<!--/*#thymesVar id="productList" type="java.util.List"*/-->
<tr th:id="${person.getId()}" th:each="person : ${elementList}">
<td th:text="${person.getName()}" class="username"></td>
<!--/*#thymesVar id="getTradableBTC" type="java.lang.Double"*/-->
<td th:text="${person.getAge()}" class="age"></td>
<!--/*#thymesVar id="getTop" type="java.lang.Double"*/-->
<td th:text="${person.getId()} " class="id"></td>
<td>
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary" type="button" id="addElement">Add Element</button>
<button class="btn btn-light" type="button" id="DeleteAll">Delete all Elements</button>
</div>
</div>
Related
I tried to show added product details after i clicked shopping cart icon or if i added any one product same like https://designmodo.com/shopping-cart-ui/. Initially no need to show the" Your Cart Items" added product box.I do not know how to do like that.If any one know please help to find the solutions.
addtocart-dir.ts:
<div class="card text-center">
<div class="card-header">
Your Cart Items
<button type="button" class="btn btn-sm btn-warning float-right">
Total items <span class="badge badge-light">{{cart.cartItemsList.length}}</span>
</button>
<button type="button" class="btn btn-sm btn-danger mr-2 float-right" (click)="emptyCart()" *ngIf="cart.cartItemsList && cart.cartTotal">
Empty Cart
</button>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Qty</th>
<th scope="col">Total</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr *ngFor="let itm of cart.cartItemsList ">
<td class="text-left">{{itm.name}}</td>
<td>{{itm.price/itm.qty}} x</td>
<td class="w30">
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-info" type="button" (click)="changeQty(itm.pid,1,'')">+</button>
</div>
<input type="text" class="form-control text-center" value="{{itm.qty}}" #qtyRef (keyup)="changeQty(itm.pid,qtyRef.value,'replace')" >
<div class="input-group-append">
<button class="btn btn-danger" type="button" (click)="changeQty(itm.pid,-1,'')">-</button>
</div>
</div>
</td>
<td>{{itm.price}}</td>
</tr>
</tbody>
</table>
<a routerLink = "/billing" class="btn btn-sm btn-primary" *ngIf="cart.cartItemsList && cart.cartTotal">Checkout</a>
</div>
<div class="card-footer text-muted font-weight-bold">
Total : Rs. {{cart.cartTotal}}
</div>
</div>
Demo: https://stackblitz.com/edit/angular-selvam-ecommerce-task-btjqde?file=src%2Fapp%2Fdirectives%2Faddtocart.dir.ts
Change in cart.service.ts
public cartItemsList: any = [];
change in products.pages.ts
<div class="row">
<div [ngClass]="cart.cartItemsList.length == 0 ? 'col-md-12' : 'col-md-7'">
<productslist-dir (refresh)="ref($event)" [allProductList]="products.data [searchedText]="searchText" [sortingBy]="sortOption"></productslist-dir>
</div>
<div class="col-md-5" *ngIf="cart.cartItemsList.length > 0">
<cart></cart>
</div>
change in productslist.dir.ts
ngOnInit(){
this.sortByOption = 'product_name';
this.cart.allItems = this.__allprdts;
this.cart.storeItems();
}
addToCart(productId,productQty){
this.cart.addToCart(productId,productQty,'');
this.refresh.emit(true);
}
please check and let me know..
how to set a button sit next to a table within a div.
my code is:
<div class="col-xs-6"> <!-- main div -->
<div> <!-- table div -->
<table class="table table-bordered table-striped text-center">
<thead><tr>
<!-- 4 Header -->
</tr></thead>
<tbody> <tr><td>
<!-- first row -->
</td></tr></tbody>
</table>
</div>
<div class="col-xs-4">
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-2" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
-- main div close
what i am getting is:
put the main div to class: col-xs-12
and button div to col-xs-8 or col-xs-10.
So, main is total 12 in which you are putting the Table with *-xs-2 and button with *-xs-8
Try this
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col-xs-4">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="search" id="search">Search</button>
</div>
<div class="col-xs-3" >
<button type="button" class="btn btn-primary" name="add" id="add">Add</button>
</div>
</div>
</div>
</div>
</div>
Check this out: https://jsfiddle.net/hbp71ejr/
I am trying to create webpage from twitter bootstrap.I used card and table properties there.Problem im getting here is my table is displaying below card.I tried adding float-right float-left classes but that is not working.i want card to float left and table on right side on large screens and both responsive on small screen.Any idea how can i do it?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Edited your html code .you have put both card and table col-md-4.
I have changed it
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >
<div class="container">
<div class="row">
<div class="col-md-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name" style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header"><i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon" a href="" style="text-decoration: none;"><i class="fa fa-amazon" style="color: #0E0B16;"></i> Amazon</a></button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" a href="" style="text-decoration: none;"><img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay</button>
<button type="button" class="btn btn-lg btn-outline-secondary flab" a href="" style="text-decoration: none;">500</button>
</div>
</div>
</div> <!--Specification Table-->
</div>
<div class="col-md-4">
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB<br>
Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE<br>
4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td><span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)<br><span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core<br>
Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Please use this code it's works for me, this fully responsive :
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<!--Card-->
<div class="card mb-4 box-shadow">
<!--Image-->
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Item_name"
style="width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22348%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_161ad3c12bc%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A17pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_161ad3c12bc%22%3E%3Crect%20width%3D%22348%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22116.5%22%20y%3D%22120.3%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
<!--Below Image-->
<div class="card-body">
<!--Item-Name-->
<p class="card-text item-header">
<i class="fa fa-hashtag"></i>1 Item 1</p>
<!--Affiliate Section-->
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group mb-2 affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary amazon">
<a href="" style="text-decoration: none;">
<i class="fa fa-amazon" style="color: #0E0B16;"></i>
Amazon</a>
</button>
<button type="button" class="btn btn-lg btn-outline-secondary amazedon-2" a href="" style="text-decoration: none;"> 400</button>
</div>
</div>
<div class="btn-group affilaite-group">
<button type="button" class="btn btn-lg btn-outline-secondary ebay" style="text-decoration: none;">
<img class="ebayed" src="flipkart.svg" alt="" style="color:#0E0B16;height: 18px;"> ebay </button>
<button type="button" class="btn btn-lg btn-outline-secondary flab">
500
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<!--Specification Table-->
<table class="table table-responsive table-striped">
<tbody>
<tr>
<th>OS</th>
<td>Android Marshmallow 6.0</td>
</tr>
<tr>
<th>STORAGE</th>
<td>Internal: 32 / 64 GB
<br> Expandable: Yes (128 GB)</td>
</tr>
<tr>
<th>RAM</th>
<td>2/3/4 GB</td>
</tr>
<tr>
<th>Battery & SIM</th>
<td>Dual Sim (1 nano & 1 micro) 4GLTE
<br> 4100mAh Non-Removable</td>
</tr>
<tr>
<th>Camera</th>
<td>
<span class="td-bold" style="font-weight: 700;">Rear:</span> 13 MP (CMOS Camera,f2.0 Aperature)
<br>
<span class="td-bold" style="font-weight: 700;">Front:</span> 5 MP (1080p Full HD Video Recording)
</td>
</tr>
<tr>
<th>Processor</th>
<td>Qualcomm Snapdragon 625 Octa-Core
<br> Adreno 506</td>
</tr>
<tr>
<th>Dispaly</th>
<td>1920 x 1080 5.5 inch (401ppi) IPS LCD</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
I am using split-button dropdowns, and I am wondering if there is way to stop the wrapping of the dropdown button?
Before, I had
<div class="btn-group btn-block"> // btn-block
And the split button would wrap even when the screen was resized:
But I was able to find a fix for that (GitHub Issue Link)
<div class="btn-group" style="width:100px;"> // Removed btn-block class, added style
But now if I select an option from the Dropdown, it becomes wrapped again, regardless of the screen size/column width (this issue was not there when I had the btn-block class as long as there was enough room in the column):
I would like the dropdown to not wrap regardless of the screen size or the option selected. Also, I do have the width of the columns set using col-md-*
Also, when a long option is selected, it starts to overlap into the next column:
I hope I have provided enough information to initiate meaningful responses.
JSFiddle Demo
<div class="col-lg-10" id="mapColumn">
<div>
<table class="table table-condensed tablesaw tablesaw-stack table-striped-column" data-tablesaw-mode="stack" id="table2">
<thead>
<tr>
<th class="col-md-2">Map Actions</th>
<th class="col-md-2">DB Actions</th>
<th class="col-md-1">ID</th>
<th class="col-md-3">Name</th>
<th class="col-md-3">Features</th>
<th class="col-md-1">Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="mapActions">
<li><a>TOGGLE Map</a></li>
<li><a>ROTATE View</a></li>
<li><a>SAVE Pic to PC</a></li>
</ul>
</div>
</td>
<td>
<!-- <div class="btn-group btn-block"> -->
<div class="btn-group" style="width:100px;">
<button type="button" class="btn btn-sm btn-success">Actions</button>
<button type="button" class="btn btn-sm btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dbActions">
<li><a>UPDATE Features</a></li>
<li><a>SAVE POV to DB</a></li>
</ul>
</div>
</td>
<td>123456</td>
<td>Street A & Street B and a very very very long name</td>
<td>
<span class="label label-success">Label One</span>
<span class="label label-success">Label Two</span>
<span class="label label-success">Label Three</span>
<span class="label label-success">Label Four</span>
</td>
<td>★★★★★</td>
</tr>
</tbody>
</table>
</div>
You can add these styles:
.btn-group {
white-space: nowrap;
font-size: 0;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-block;
float:none;
}
Basically this makes the .btn elements inline, which in turn allows it to take advantage of nowrap white spacing. I also had to set the button group to font-size:none to remove the spacing between the buttons, but Twitter Bootstrap sets a non-relative, pixel value for button font size, so setting font-size:0 on the .btn-group shouldn't be a problem. I removed the floating from the .btns and, lastly, removed the fixed width of 100px in the markup.
https://jsfiddle.net/jmarikle/b4qtrfmb/
Edit:
Alternatively, you should also be able to use display:flex
.btn-group, .btn-group-vertical {
display:flex;
}
.btn-group-vertical>.btn, .btn-group>.btn {
display:inline-flex;
float:none;
}
https://jsfiddle.net/jmarikle/b4qtrfmb/1/
I got a table which repeats a delete button for each and every member. The confirmation button does work when I don't use the modal, however if i use the Modal, the first row only gets deleted.
As I researched, it could be that since the delete is getting repeated, its value stays for the first row.
Table HTML Code:
<table class="table table-bordered" id="customForms" ng-show="showMembers">
<thead><tr> <th> ID </th> <th>Name</th> <th>Surname</th> <th>Date Of Affiliation</th> <th>Status</th> <th>Email</th> <th>Summary</th></tr></thead>
<tbody>
<tr ng-repeat="member in members">
<td>{{member.memberID}}</td>
<td>{{member.name}}</td>
<td>{{member.surname}}</td>
<td>{{member.dateOfAffiliation}}</td>
<td>{{member.status}}</td>
<td>{{member.email}}</td>
<td>{{member.summary}}</td>
<td><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> DELETE </button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you wish to delete this row?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="deleteMember(member)" data-dismiss="modal">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
AngularJS Code:
$scope.deleteMember = function(member) {
$http.post('model/deleteMember.php', member).success(function(data) {
$scope.getMember();
});
}