javascript - 如何将选定的行数据传递给 Bootstrap 模式

Question

首先，我是 Angular 的新手。现在我在表格中显示数据库中的记录列表。网格显示 ID、名字、姓氏，并且每行都有一个编辑按钮。当我单击编辑按钮时，我打开了 dit 页面的 Bootstrap 模式。我想使用我在客户端捕获到网格的数据，并将行数据传递给模态。

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', 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;

}]);

谢谢

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>