如何將選定的行數據傳遞到自舉模式

Question

首先我是新來的角。現在我在表格中顯示數據庫中的記錄列表。網格顯示ID，名字，姓氏，並且每行有一個編輯按鈕。當我點擊編輯按鈕時，我打開了dit頁面的引導模式。我想使用捕獲到客戶端的數據，並將行數據傳遞給模態。

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> 

模態

<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'，函數（$範圍，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; 

}]); 

由於

Answer 1

的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; 
} 

模式

<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>