I want to delete the criteria list item on clicking the delete button. Right now only the filter is getting refreshed. The tables are not being deleted. Suggestions to get through this.
HTML
<ul class="list-unstyled">
<li style="display: inline-block" ng-repeat="crtia in newCriteria" >
<table>
<tr>
<td>
<select class="input-sm" ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
</td>
<td>
<input class="input-sm " ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" ng-click="searchy.check()" />
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" ng-click="removeCriteria($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
</button>
</td>
</tr>
</table>
</li>
</ul>
JS
$scope.removeCriteria=function($index){
$scope.searchy.check();
alert($index);
$scope.newCriteria.splice($index,1);
$scope.newList(); //Refreshes the filter
}
Try this
HTML
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" data-ng-click="removeCriteria(crtia)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
JS:
$scope.removeCriteria = function (sourceToRemove) {
$scope.searchy.check();
var index = $scope.newCriteria.indexOf(sourceToRemove);
$scope.newCriteria.splice(index, 1);
$scope.newList(); //Refreshes the filter
}
Update Plunker
Related
How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>
I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}
<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>
HTML CODE
<tbody>
<tr>
<td>0</td>
<td>204093D-P12</td>
<td>80443</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>1</td>
<td>216619D-P18</td>
<td>16009</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>2</td>
<td>21663P0012</td>
<td>13116</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>3</td>
<td>217496D-P078</td>
<td>16032</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr>
</tbody>
And i have to tried to get data-id attribute value from using Jquery in following way
function ShowModal(){
alert($(this).attr("data-id"));
}
but return undefinedhow to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?
You need to pass the current element context in inline click handler like
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
Additionally, I would recommend you use jquery to bind event handler's instead of ugly inline click handler.
One of the important part of jquery is manipulate the DOM.
DOM = Document Object Model : Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
It has several DOM Manipulation :
Get Content : text(), html(), and val()
Get Attributes : attr()
Now if u have to access a particular attribute on click of button or something else then use this :
so here is my HTML
<p>google.com</p>
<button>Click Here</button>
then u have to access the attributes of anchor tag like this:
$("button").click(function(){
alert($("#test").attr("href")); // output : http://www.google.com
alert($("#test").attr("data-id")); // output : id_12345
});
$(function () {
$(".inputs").click(function (e) {
alert($(this).attr("data-id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-xs btn-flat inputs" value="click" type="button" data-toggle="modal" data-id="217496D-P078" data-target="#myModal"/>
You can use Javascript's dataset or JQuqery data method:
$(document).ready(function() {
$('button').on('click', function() {
console.log(this.dataset.id, $(this).data().id, $(this).data('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<tr>
<td>
<button type="button" data-id="1">btn #1</button>
<button type="button" data-id="2">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="3">btn #1</button>
<button type="button" data-id="4">btn #2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="5">btn #1</button>
<button type="button" data-id="6">btn# 2</button>
<br>
</td>
</tr>
<tr>
<td>
<button type="button" data-id="7">btn #1</button>
<button type="button" data-id="8">btn #2</button>
<br>
</td>
</tr>
</tbody>
Your code is correct, all need to do is pass this to your function like:
<button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal(this)"><i class="fa fa-plus" aria-hidden="true"></i></button>
You have to create unique data-id in your code data-id not unique.
data-id="217496D-P078" data-target="#myModal" type="button" title="Add"
data-id="217496D-P078" data-target="#myModal_edit" type="button" title="
data-id="217496D-P078" data-target="#myModal_details" type="button" titl
then
Try this
<button onClick="ShowModal(this)" data-id="217496D-P078"></button>
function ShowModal(elem){
var dataId = $(elem).data("id");
alert(dataId);
}
I am working on an application that allows a user to click a delete button on a row in a table, then a confirmation modal should pop up; finally when you click yes, you should be able to delete that row. My code doesn't do that, instead it first deletes the header of which I only want to delete the row I specified, not the header. I used bootstrap for the css.
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("datatable-responsive").deleteRow(i);
$('#confirm-delete').modal('hide');
}
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John </td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
</tbody>
</table>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Use Element.parentNode.parentNode.remove();
function deleteRow(r) {
r.parentNode.parentNode.remove();
//$('#confirm-delete').modal('hide');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John</td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
</tbody>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>
Assuming that the argument you're passing to your deleteRow function is a grand-child of the row you want to delete, your problem may be that you're calling deleteRow (the DOM method) on the table itself, not the table's tBody. Try
document.getElementById("datatable-responsive").tBodies[0].deleteRow(i);
(edit:) But Rayon's solution is more elegant anyway. Saves you the trouble of getting a reference to the tbody.
I have an ng-repeat which loops over some items, and am using an editmode parameter to switch between a label and inputfield to let the user edit the value in-line.
Now I would like the functionality to be like this:
when the user presses the Add button, a new empty (or default) item is created, that has the editmode set to true (so that the input textbox shows with the save button, rather than the label with the edit button).
I have googled a lot about this but could not find a clear answer so far. :(
Code is as follows:
<div ng-repeat="todo in todos">
<span data-ng-hide="editMode">
{{ todo.name }}
</span>
<input type="text" placeholder="{{ todo.name }}" data-ng-show="editMode" data-ng-model="name" data-ng-required />
<button type="submit" class="btn btn-default btn-xs" data-ng-hide="editMode" ng-click="editMode = true">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="submit" class="btn btn-default btn-xs" data-ng-show="editMode" ng-click="editMode = false; editTodo(todo._id)">
<span class="glyphicon glyphicon-save"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="deleteTodo(todo._id)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
Thanks in advance
You could keep it simple by adding a separate input element outside of your ng-repeat.
Plunker: http://plnkr.co/edit/YDkzgtOSNpqDehnPkpZe?p=preview
Add another div element below your ng-repeat as below:
<div>
<button ng-show="!addNew" class="btn btn-sm btn-primary" ng-click="addNew=true">Add New</button>
<br>
<div ng-show="addNew">
<input type="text" ng-model="newTodo.name" ng-required />
<button type="submit" class="btn btn-default btn-xs" ng-click="addNewTodo()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="resetNewTodo()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
Don't use editMode as scope variable. Use it as todo's object field (todo.editMode). Set it to true for new todo object.
The ngRepeat offers you $index - current position, $first, $last - so you can check against those to determine when you're on the first or when you reached the last element.
I have this bootstrap dropdown for set delete/publish/unpublish data in action form:
<div class="col-sm-7">
<ul class="list-unstyled topControl">
<li id="bulkAction">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-action="3">Delete
</li>
<li data-action="1">Publish
</li>
<li data-action="0">Unpublish
</li>
</ul>
</div>
</li>
</ul>
</div>
in form I have this html:
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="6" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="5" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
now I need to choose article in checkbox(one rows or multiple rows) than when click in dropdown menu (example delete) my form handle this and delete rows from database using PHP like this:
if ($_POST['action'] == "delete")
{
$selected = $_POST['id'];
if (count($_POST['id']) !== 0)
{
foreach($selected as $uid)
{
SQL::DELETE("DELETE FROM " . NEWS_ARTICLES . " WHERE id = ?", $uid);
}
echo "<div class=\"success\">" . $langmsg['editnews'][17] . "</div>";
}
}
how do can I create this?!
You can add another field in the label li for example data-selected="false"
and when you clicked on the li change the status data-selected="true".
Then for retrieving the fields $('li[data-selected=true]'), and for get the values apply a each inside $('li[data-selected=true]').