javascript - 我如何使用angularjs在ng-repeat中附加表数据值

Question

我有两张 table 。单击动态表数据按钮后，表 1 将出现动态数据。单击 done 按钮后，我想将数据附加到 $scope.notiData 中。现在，在我点击done 按钮后，$scope.notiData 数据消失了。每次数据来自 tableTwo 当前的内容。那么我如何使用 concat Iin $scope.notiData。请帮忙。 http://jsfiddle.net/A6bt3/127/

Js

   var app = angular.module('myApp', []);
   function checkBoxCtrl($scope) {
   $scope.notiData = [];
   $scope.tableOne = [{
        firstname: 'robert',
        value: 'a'
    }, {
        firstname: 'raman',
        value: 'b'
    }, {
        firstname: 'kavi',
        value: 'c'
    }, {
        firstname: 'rorank',
        value: 'd'
    }
];
    $scope.tableOne1 = [{
        firstname: 'robvzxcvert',
        value: 'a'
    }, {
        firstname: 'ramsdgan',
        value: 'b'
    }, {
        firstname: 'kasdgsdgvi',
        value: 'c'
    }, {
        firstname: 'rordggank',
        value: 'd'
    }
];
$scope.tableTwo = [];//the table to be submitted
function removeitems(tableRef) { //revmove items from tableRef
    var i;
    for (i = tableRef.length - 1; i >= 0; i -= 1) {
        if (tableRef[i].checked) {
            tableRef.splice(i, 1);
        }
    }
}
$scope.btnRight = function () {
   //Loop through tableone
    $scope.tableOne.forEach(function (item, i) {
       // if item is checked add to tabletwo
        if (item.checked) {
            $scope.tableTwo.push(item);
        }
    })
    removeitems($scope.tableOne);
}
$scope.btnAllRight = function () {
    $scope.tableOne.forEach(function (item, i) {
        item.checked = true;
        $scope.tableTwo.push(item);
    })
    removeitems($scope.tableOne);
}
$scope.btnLeft = function () {
    $scope.tableTwo.forEach(function (item, i) {
        if (item.checked) {
            $scope.tableOne.push(item);
        }
    })
    removeitems($scope.tableTwo);
}
$scope.btnAllLeft = function () {
    $scope.tableTwo.forEach(function (item, i) {
        item.checked = true;
        $scope.tableOne.push(item);
    })
    removeitems($scope.tableTwo);
}
$scope.done = function () {
      angular.extend($scope.notiData, $scope.tableTwo);
     $scope.tableTwo = [];
}
$scope.removeRow = function (item) {
    var index = $scope.notiData.indexOf(item);
    $scope.notiData.splice(index, 1); 
}
 $scope.dynamicTable= function () {  
       $scope.tableOne1.forEach(function (item, i) {
        item.checked = true;
        $scope.tableOne.push(item);
    })
   } 
  };

Answer 1

I want to append the data in $scope.notiData. now after I click done button $scope.notiData data is gone

angular.extend 替换现有条目。要追加，请使用 array.concat :

$scope.done = function () {
     //angular.extend($scope.notiData, $scope.tableTwo);
     $scope.notiData = $scope.notiData.concat($scope.tableTwo);
     $scope.tableTwo = [];
}

同时为了避免 在 ng-repeat 中重复使用 track by 错误，请使用 angular.copy推送项目:

$scope.dynamicTable= function () {  
    $scope.tableOne1.forEach(function (item, i) {
        item.checked = true;
        //$scope.tableOne.push(item);
        $scope.tableOne.push(angular.copy(item));
    }); 
};

ng-repeat 指令通过引用跟踪数组对象。推送重复对象将导致跟踪错误。 angular.copy 将为项目创建一个新的唯一对象引用，并将避免跟踪错误。

DEMO on JSFiddle .