如何将选定的行数据传递给bootstrap模式

Question

首先，我是棱角分明的新手。 现在我在表格中显示数据库中的记录列表。 网格显示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'，函数（$ 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>