tshoemake tshoemake - 19 days ago 7
Javascript Question

How to pass a row's data to an edit page

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

Answer

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>