我在jquery中有一个表,当我点击delete
图标时,我需要显示bootstrap modal
来执行delete
操作。
我使用jquery做了但是我不知道在角度做到这一点。任何人都可以给我一些建议吗?
<body ng-app="intranet_App">
<div class="container">
<div class="modal" id="deleteProject">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="confirmMessage">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="confirmOk">Ok</button>
<button type="button" class="btn btn-default" id="confirmCancel">Cancel</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 margin20 padding table-responsive">
<table class="col-xs-12 table table-hover table-bordered" id="projectList" ng-controller="myCtrl">
<thead class="colorBlue">
<tr><th>Project Name</th><th>Client</th><th>Client Co-ordinator</th><th>Action</th></tr>
</thead>
<tbody id="projectListTBody" >
<tr ng-repeat="x in projectList | filter:ProjectName">
<td>{{ x.ProjectName}}</td>
<td>{{ x.Client}}</td>
<td>{{ x.OnsiteCoordinator}}</td>
<td>
<i class="fa fa-user-plus fa-2x" ng-click="addResource()"></i>
<i class="fa fa-edit fa-2x" ng-click="editProj(x.Id)"></i>
<i class="fa fa-trash fa-2x" data-toggle="modal" data-target="#myModal" data-dismiss="modal" ng-click="deleteProject(x.Id)"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = angular
.module("intranet_App", [])
.controller("myCtrl", function ($scope, $http) {
$scope.projDetails = [];
$http.post('/Project/getProjectsList')
.then(function (response) {
console.log(response)
$scope.projectList = response.data;
})
$scope.editProj = function (x) {
$scope.projectDetails(x);
window.location = "/Project/EditProject?id=" + x;
}
$scope.projectDetails = function (x) {
$scope.projDetails.push(x);
$scope.json = angular.toJson($scope.x)
console.log($scope.json)
}
$scope.addResource = function () {
window.location = "/Project/ProjectRes";
}
});
</script>
这是我的jquery方法:
function deleteProject(control) {
event.stopPropagation()
id = $(control).closest('tr').attr('id');
confirmDialog("Are you sure do you want to delete this Project?", function () {
removeProject(id)
});
}
function removeProject(elem) {
var updatedBy = $("#userName").text();
var ajxObj = { id: elem};
$.ajax({
type: "POST",
url: "/project/ProjectDelete",
data: JSON.stringify(ajxObj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
$(".success").html("project Deleted successfully!");
$('.success').show();
setTimeout(function () {
$('.success').hide();
}, 1000);
loadProjectsList()
}
});
}