Javascript AngularJS复制现有表行

Javascript AngularJS复制现有表行,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我有一个带有编辑和删除按钮的表。但现在我还想做一个克隆按钮 “克隆”按钮的工作原理如下:它克隆几乎所有的数据,例如用户无法从单击的行中获取的id。然后它进入编辑页面,并在那里填充输入/选择值中的数据 但我不知道我是怎么做到的。 我现在有一个输出所有数据的函数:var cloneJob=angular.extendjob 然后转到编辑页面location.href='/jobs/add'; 但问题是他没有填充输入/选择值。 AngularJS有这个功能吗?我是在正确的轨道上,还是需要做些别的事情

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

“克隆”按钮的工作原理如下:它克隆几乎所有的数据,例如用户无法从单击的行中获取的id。然后它进入编辑页面,并在那里填充输入/选择值中的数据

但我不知道我是怎么做到的。 我现在有一个输出所有数据的函数:var cloneJob=angular.extendjob

然后转到编辑页面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>
这将输出大量json和所有正确的数据,并进入添加页面。

尝试类似的操作

<tr ng-repeat="whatever in whatevers"><button ng-click="duplicateItem(whatever)">duplicate</button></tr>
如果您提供一个工作示例fiddle或至少提供更多代码,那么我们可以为您提供更准确的答案

编辑:

一种更简洁的方法是让克隆函数将信息加载到服务或工厂,即单例。然后在加载路由后,您使用该服务将内容取回并播放

比如:

然后,控制器中的克隆函数现在必须注入我们刚刚创建的工厂,只需包装loadJob方法:

对于将使用克隆数据的函数也一样:

这仍然可以改进


注意:角度单例用于在控制器、服务等之间共享信息。

创建新的“克隆”路由,该路由使用与“添加”路由相同的控制器和视图,但传入应克隆的作业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 = {};
    }
});

您能用值显示您的表吗,以及您现在如何编辑它?控制器将在页面更改时重新执行,从而刷新您的值。您需要的是一个服务/工厂,您可以在其中存储状态值。然后控制器将检查值是否存在,如果存在,则填充它。我需要将复制功能放在服务/工厂中,还是需要保留在控制器中?编辑我的答案不知道它是否满足您的需要100%您是说函数$scope.someFunction可用于设置输入/选择字段中的数据?当你改变页面/url页面时,你还能使用这些数据吗?我想说的是,当你有不同的控制器时,你可以通过使用服务和注入它们来共享数据。Angular Services和Factory不是实例,它们只是简单的单例对象,因此当您更改控制器时,其内容不会更改。具有相同值的同一对象将被注入到不同的控制器中。另外,你要让你的控制器保持简单。哦,好吧,你可以用这个函数为另一个控制器获取数据。谢谢将尝试将数据推入输入并选择字段
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
            }
        };
    });
$scope.cloneJob = function (job) {
    CloneJobFactory.loadJob(job);
}
$scope.someFunction = function (whateverParams) {
  var clonedJob = CloneJobFactory.getClonedJob();
  //whatever you want
}
.when('/jobs/add', { templateUrl: 'jobs/add', controller: 'AddController' })
.when('/jobs/clone/:id', { templateUrl: 'jobs/add', controller: 'AddController' })
myModule.controller('AddController', function($scope, $routeParams){
    if($routeParams.id) {
        //TODO get existing job using $routeParams.id
        $scope.newJob = angular.copy(job);
    } else {
        $scope.newJob = {};
    }
});