Pass table data into a method in angular

Question

Here is my code:

<body ng-app="intranet_App" ng-controller="myCtrl">
    <div class="container">
        <div class="modal" id="deleteProject">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body" id="confirmMessage">
                    Are you sure do you want to delete this project??
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="confirmOk" ng-click="deleteProject(x.Id)">Ok</button>
                        <button type="button" class="btn btn-default" id="confirmCancel" data-dismiss="modal">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">
                    <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="#deleteProject"></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.deleteProject = function (id) {
                            alert(id)
                        }

                    });
</script>

Here when I click delete icon in a table, I am displaying one bootstrap popup modal.In that modal I need to pass x.Id inside deleteProject method on the on click on ok button.But I am unable to hit the method,how to pass it?

score 1 · Accepted Answer · 2017-06-12 14:01:26Z

1

In HTML code, add ng-click to delete button

<i class="fa fa-trash fa-2x" data-toggle="modal" data-target="#deleteProject" ng-click="delete(x.id)"></i>

In controller add following method

$scope.delete = function (id) {
    $scope.deleteId = id;
}

Using that in deleteProject method

$scope.deleteProject = function () {
    //use $scope.deleteId here
    alert($scope.deleteId);   
}

edited Jun 12, 2017 at 14:01

answered Jun 12, 2017 at 13:55

user4870812

Sign up to request clarification or add additional context in comments.

1 Comment

user7397787 Over a year ago

can you please give any suggestion for this question stackoverflow.com/questions/44491736/…

casraf · Accepted Answer · 2017-06-12 12:25:02Z

0

You're trying to access the x var outside of the ng-repeat in which it is defined it, so naturally, it won't know what x is. This is why you're getting undefined.

Here's the quickest solution I could come up with, there should be a better way, though:

<i class="fa fa-trash fa-2x"
   data-toggle="modal"
   data-target="#deleteProject"
   ng-click="current = x"></i>

Which will assign the last clicked x into current. Then, you should refer to current inside the modal:

<button type="button"
        class="btn btn-default"
        id="confirmOk"
        ng-click="deleteProject(current.Id)">
  Ok
</button>

answered Jun 12, 2017 at 12:25

casraf

21.8k10 gold badges60 silver badges93 bronze badges

2 Comments

user7397787 Over a year ago

Still am getting undefined only

user4870812 Over a year ago

can you declare $scope.current = {} in controller, I think it will work

Collectives™ on Stack Overflow

Pass table data into a method in angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related