我们可以在angularjs

时间:2017-06-12 09:53:53

标签: angularjs

我在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()
        }
    });
}

1 个答案:

答案 0 :(得分:0)

您可以使用bootstrap角度模型弹出窗口。

了解更多信息https://angular-ui.github.io/bootstrap/#!#modal