Question

我有一个带有编辑和删除按钮的表。但现在我也想制作一个克隆按钮。

克隆按钮应该如下工作：它从用户单击的行中克隆几乎所有数据（例如他不能采用的数据等数据）。然后它进入编辑页面并在那里填充输入/选择值中的数据。

但我不知道我是如何完成这件事的。我现在有一个输出所有数据的函数：var cloneJob = angular.extend(job);

然后转到编辑页面location.href = '#/jobs/add'; 但问题是他没有填写输入/选择值。 AngularJS有这个功能吗？我是在正确的轨道还是我还需要做其他事情？

更新这是一个更多的代码：

这是我的表格代码：

<tr ng-repeat="job in (filtered.rows = (jobs | orderBy: orderByDate:true | filter:filterByActive | filter:filter.query)) | skip:pagination.pageSkip() |limitTo:pagination.perPage" ng-class="{ inactive : !job.active }"  style="cursor: pointer;">
    <td>
        <span ng-bind="job.title"></span>
    </td>
    <td>
        <span ng-bind="job.client.name"></span>
    </td>
    <td> 
        <span ng-bind="job.referenceNumber"><span>
    </td>
    <td> 
        <span ng-bind="job.creationDate"><span>
    </td>
    <td>
        <a ng-href="#/jobs/edit/{{job.id}}/tab/candidates" ng-bind="job.candidates.length"></a>
    </td>
    <td>
        <span class="status" ng-class="job.status.value"></span>
    </td>
    <td>
        <a ng-if="job.active" ng-href="#/jobs/edit/{{job.id}}" class="icon go">
            <span class="tooltip" translate="job_name_details"></span>
        </a>
        <a ng-if="job.active" class="icon close" ng-click="showClosePopup(job)">
            <span class="tooltip" translate="job_close"></span>
        </a>

        <a ng-click="cloneJob(job)" ><span>Clone!</span></a>
        <!-- <button data-ng-click="cloneItem(food)" class="btn inline">Add</button> -->

    </td>
</tr>

函数cloneJob是：

$scope.cloneJob = function (job){
    var cloneJob = angular.extend(job);
    location.href = '#/jobs/add';
}

这会输出大量的json（所有正确的数据）并进入添加页面。

Answer 1

尝试类似

的内容

<tr ng-repeat="whatever in whatevers"><button ng-click="duplicateItem(whatever)">duplicate</button></tr>

在控制器上：

$scope.duplicateItem = function(item){
   $scope.duplicatedItem = angular.copy(item); //this will do a copy, not just assign a reference.
   //if you need clean the duplicate item
   delete $scope.somePropertyYouWannaClean;
}

如果你提供一个工作示例小提琴或至少更多代码会更好，所以我们可以给你更准确的答案。

修改

更简洁的方法是让clone函数将信息加载到服务（或 factory ， singleton ）。然后在加载路线后，使用服务来获取内容并使用它。

像：

angular.module('some.namespace.factory', []) .factory('CloneJobFactory', function () { return { job: null, loadJob: function (job) { var auxJob = angular.copy(job);//if you just need a shallow copy use angular.extend this.job = this.cleanJob(auxJob); }, getClonedJob: function(){ return this.job; }, cleanJob: function(job) { //code that cleans a job object that has been cloned delete job.propertyYouDoNotWantToKeep; return job;//return the cleaned job } }; });

然后控制器中的clone函数（现在必须注入我们刚刚创建的 factory ）只需要换行 loadJob方法：

$scope.cloneJob = function (job) { CloneJobFactory.loadJob(job); }

使用克隆数据的函数也是如此：

$scope.someFunction = function (whateverParams) { var clonedJob = CloneJobFactory.getClonedJob(); //whatever you want }

这仍然可以改进。

注意：除了其他方面，Angular singletons还会在控制器，服务等之间共享信息。

Answer 2

创建一个新的“克隆”路由，它使用相同的控制器和视图作为“添加”路由，但传入应克隆的作业的ID：

.when('/jobs/add', { templateUrl: 'jobs/add', controller: 'AddController' })
.when('/jobs/clone/:id', { templateUrl: 'jobs/add', controller: 'AddController' })

然后，在AddController中，检查是否已使用$ routeParams传递了一个id。如果有id，则使用id获取作业，并通过克隆作业来初始化模型。如果没有id，请使用“空”作业初始化模型。

myModule.controller('AddController', function($scope, $routeParams){
    if($routeParams.id) {
        //TODO get existing job using $routeParams.id
        $scope.newJob = angular.copy(job);
    } else {
        $scope.newJob = {};
    }
});

AngularJS复制现有的表行

2 个答案: