How to pass a selected row data to bootstrap modal

Question

First off I'm new to angular. Right now I am displaying in a table a list of records from a database. The grid shows id, first name, last name, and has an edit button per row. When I click the edit button I'm opening a bootstrap modal for the dit page. I'd like to use the data i've captured client side to the grid and pass the rows data to the modal.

Index.cshtml

<div ng-app="PersonApp" class="container">
<br />
<br />
<input type="text" placeholder="Search Person" ng-model="searchPerson" />
<br />
<br />
<div ng-controller="PersonController">
    <table class="table">
        <thead>
            <tr>
                <th ng-click="sortData('Id')">
                    ID <div ng-class="getSortClass('Id')"></div>
                </th>
                <th ng-click="sortData('firstName')">
                    First Name <div ng-class="getSortClass('firstName')"></div>
                </th>
                <th ng-click="sortData('lastName')">
                    Last Name <div ng-class="getSortClass('lastName')"></div>
                </th>
                <th>Actions</th>
            </tr>
        </thead>
        <tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
            <td>{{r.Id}}</td>
            <td>{{r.firstName}}</td>
            <td>{{r.lastName}}</td>
            <td><a href="" data-toggle="modal" data-target="#myModal"><span class="fa fa-pencil-square-o"></span></a></td>
        </tr>
    </table>
</div>

Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4 mb10">
                    @Html.Label("First Name")
                </div>
                <div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    @Html.Label("Last Name")
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

AngularJS

/// <reference path="angular.min.js" />

var PersonApp = angular.module('PersonApp', []);

PersonApp.controller('PersonController', function ($scope, PersonService) {

getPersons();
function getPersons() {
    PersonService.getPersons()
        .success(function (person) {
            $scope.persons = person;
            console.log($scope.persons);
        })
        .error(function (error) {
            $scope.status = 'Unable to load customer data: ' + error.message;
            console.log($scope.status);
        });

    $scope.sortColumn = 'id';
    $scope.reverseSort = false;

    $scope.sortData = function (column) {
        $scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
        $scope.sortColumn = column;
    }

    $scope.getSortClass = function (column) {
        if ($scope.sortColumn == column) {
            return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
        }

        return '';
    }
}
});

PersonApp.factory('PersonService', ['$http', function ($http) {
    var PersonService = {};
    PersonService.getPersons = function () {
       return $http.get('/Home/GetPersons');
    };
    return PersonService;

}]);

Thanks

You could also consider separating models for items in your table and in your edit popup. For example, if your table only displays basic information but the edit modal displays more, this has the advantage of reducing unnecessary data transfer (that is, not loading data that you won't display unless the user wants to edit something). With this approach you could load the data from the server when opening the popup and then the only thing you need to pass to the handler is the id. This has the advantage that the modal will always show up-to-date data upon opening. — Balázs
@Balázs the edit currently displays existing data from the table. Are you saying use two way databinding? If so how do i save the edit changes in my edit modal to the db? — tshoemake

Munam Yousuf Munam Yousuf · Accepted Answer · 2016-11-22T06:58:49

index.html

        <tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
          <td>{{r.Id}}</td>
          <td>{{r.firstName}}</td>
          <td>{{r.lastName}}</td>
          <td><a href="" data-toggle="modal" data-target="#myModal" ng-click="editperson(r)"><span class="fa fa-pencil-square-o"></span></a></td>
        </tr>

angularJs

$scope.editperson = function(r){
  $scope.myPerson = r;
}

modal

    <div class="modal-body" ng-controller="PersonController">
        <div class="row">
            <div class="col-md-4 mb10">
                {{myPerson.firstName}}
            </div>
            <div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                {{myPerson.lastname}}
            </div>
        </div>
    </div>

How to pass a selected row data to bootstrap modal

1 Answers