Question

这似乎应该很容易，但谷歌搜索后我无法找到确切的答案。我是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)"的方式。为了解决这个问题，我在我的控制器中创建了一个返回单个记录的函数，它可以工作，但是当该函数运行时我似乎无法访问数据，但是我可能做错了。 / p>

我的控制器：

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

创建了一个显示复制与克隆的小提琴示例：

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

AngularJS获取单一模型记录以便在模态中进行编辑

1 个答案: