javascript - AngularJS 获取单个模型记录以在模态中进行编辑

Question

这看起来应该很容易做到，但是在谷歌搜索之后我没能找到确切的答案。我是 Angular 的新手，所以可能只是我不知道如何提出正确的问题。

问题:我有一个表格，我正在使用 ng-repeat 填充数据行。这很简单。但是，每一行都有一个编辑按钮，按下该按钮会启动一个弹出窗口，可以在其中编辑数据。因此，要对其进行编辑，弹出窗口的表单需要预先加载相应行的数据。然后，当然，当单击弹出窗口的保存按钮时，应该更新页面模型。

简单地说，我想在点击时打开一个弹出窗口，其中包含一个预先填充了我模型中单行数据的表单。

我正在使用 Twitter Bootstrap 的模式。

我的 HTML:

<table class="table table-condensed table-hover">
    <thead>
        <tr><th>Code</th><th>Name</th><th>Business Functions</th><th>Description</th><th>Retention Period</th><th>Examples</th><th></th></tr>
    </thead>
    <tbody>
        <tr ng-repeat="record in InformationManagementRecords | filter:query">
            <td>{{record.RecordNumber}}</td>
            <td>{{record.ActivitiesCategoryName}}</td>
            <td>{{record.BusinessFunction}}</td>
            <td>{{record.ActivitiesCategoryDescription}}</td>
            <td>{{record.OfficialRetention}}</td>
            <td>{{record.TransactionExampleRecords}}</td>
            <td class="driverButtonsColumn">
                <div class="btn-group btn-group-xs">
                    <button type="button" class="btn btn-default btn-xs" title="Edit" ng-click="setModalData(record)" data-toggle="modal" data-target="#addEditModal"><span class=" glyphicon glyphicon-pencil"></span></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

请注意我的按钮上有一个 ng-click="setModalData(record)"。为了解决这个问题，我在我的 Controller 中创建了一个返回单个记录的函数，它可以工作，但当该函数运行时我似乎无法访问数据，但又一次，也许我做错了。

我的 Controller :

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

InfoManagementControllers.controller('InfoManagementCtrl', ['$scope', '$routeParams', '$http',
function ($scope, $routeParams, $http) {
    $http.get('api/InformationManagement').success(function (data) {
        $scope.InformationManagementRecords = data;

        $scope.setModalData = function (record) {
            $scope.modalData = record;
        }
    });
}]);

我希望这是足够的信息。

谢谢，

亚伦

Answer 1

您需要像这样复制对象:

$scope.setModalData = function(record) {
    $scope.record_to_edit = angular.copy(record);
}

创建了一个显示复制与克隆的 fiddle 示例:

http://jsfiddle.net/robrothe/Fqfg3/