AngularJS获取单个模型记录用于在模态中编辑

AngularJS Get Single Model Record For Editing In Modal

本文关键字：模态 编辑 用于 记录 获取 单个 模型 AngularJS      更新时间：2023-09-26

这似乎应该很容易做到，但在谷歌周围我还没能找到一个确切的答案。我是Angular的新手，所以可能只是我不知道如何问正确的问题。

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

简单地说，单击我想打开一个弹出式表单，该表单预先填充了来自我的模型的单行数据。

我正在使用Twitter Bootstrap的Modal。

我的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)"。为了解决这个问题，我在我的控制器中创建了一个返回单个记录的函数，它可以工作，但当该函数运行时，我似乎无法访问数据，但再次，也许我做错了。

我的控制器:

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;
        }
    });
}]);

我希望这是足够的信息。

谢谢你,亚伦

您需要像这样复制对象:

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

创建了一个演示复制与克隆的简单示例:

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

相关文章：