Как клонировать и печатать данные в угловом

У меня есть таблица, которая печатает данные из JSON. Каждая строка имеет опцию удаления. Я хочу напечатать удаленные данные в новую таблицу. Мне удалось распечатать данные в консоли, но не удалось добавить их в поле зрения. Ниже приведен код:Как клонировать и печатать данные в угловом

Контроллер

$scope.deletedItems = []; 
    var counter = 0 

    $scope.removeRow = function (idx) { 
     console.log(idx);   
     $scope.TTNdata.splice(idx, 1);  
     var deletedArray = $scope.TTNdata.slice(idx, 1); 
     //console.log(deletedArray); 
     $scope.deletedItems.push(deletedArray); 
     console.log($scope.deletedItems); 
     counter++; 
     $('#counter').html(counter); 
    };

Вид:

<table id="deleted-rows" class=""> 
    <thead> 
     <th>Sr. No</th> 
     <th>ID</th>   
     <th>First Name</th> 
     <th>Second Name</th> 
     <th>Gender</th> 
     <th>Email</th> 
     <th>Image</th> 
     <th>Remove</th> 

    </thead> 

    <tbody> 
     <tr ng-repeat="item in deletedItems | orderBy:'id'"> 
     <td>{{$index+1}}</td> 
     <td>{{item.id}} </td> 
     <td>{{item.first_name}}</td> 
     <td>{{item.last_name}}</td> 
     <td>{{item.gender}}</td> 
     <td><a href="mailto:'{{data.email}}'">{{item.email}}</a></td> 
     <td><img src="{{item.photo}}" alt="{{item.first_name}} {{item.last_name}} photo"></td> 
     <td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>  
    </tr> 

    </tbody> 
    </table> 
    <table class="table bordered"> 
    <thead> 
    <tr> 
     <th>Sr. No</th> 
     <th>ID</th>   
     <th>First Name</th> 
     <th>Second Name</th> 
     <th>Gender</th> 
     <th>Email</th> 
     <th>Image</th> 
     <th>Remove</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="data in TTNdata | filter:bindtext | orderBy:'id'"> 
     <td>{{$index+1}}</td> 
     <td>{{data.id}} </td> 
     <td>{{data.first_name}}</td> 
     <td>{{data.last_name}}</td> 
     <td>{{data.gender}}</td> 
     <td><a href="mailto:'{{data.email}}'">{{data.email}}</a></td> 
     <td><img src="{{data.photo}}" alt="{{data.first_name}} {{data.last_name}} photo"></td> 
     <td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>  
    </tr> 
    </tbody> 
    </table>

данных печати в консоли, но не в таблице, каждый раз, когда я нажимаю удалить это создаст пустую строку в удаленные table Что я делаю неправильно?

код на GitHub https://github.com/sahilpopli/learningAngular.git

источник

2016-02-04 Sahil Popli

Что мешает вам делать '$ (». SomeClass'). HTML ($ объем .deletedItems); ' ? – Xatenev

Можете ли вы добавить ссылку jsfiddle? – Thangadurai

@xaternev Я пробовал это, но не работал –

slice возвращает массив, поэтому попробуйте $scope.deletedItems.push(deletedArray[0]);

Или попытаться объединить массивы, делая так: $scope.deletedItems = $scope.deletedItems.concat(deletedArray);

источник

2016-02-04 13:31:33

Возможным, что вам, возможно, нужно думать, что если вы будете иметь выгружаемые таблицы, удаление объекта из списка с этим индексом не могло бы быть хорошим.

Моим решением вашей проблемы было бы это (используя идентификатор вместо индекса). Это просто царапина, демонстрирующая возможный способ достижения желаемого.

Код

angular.module('App', []) 
    .controller('MyCtrl', ['$scope', function($scope) { 
    $scope.List = [{ 
     Id: 1, 
     Name: 'Name1' 
    }, { 
     Id: 2, 
     Name: 'Name2' 
    }, { 
     Id: 3, 
     Name: 'Name3' 
    }]; 
    $scope.newList = []; 

    var remove = function(itemId) { 
     var indexS = $scope.List.filter(function(item, index) { 
     return item.Id == itemId; 
     }); 
     if (indexS.length == 1) 
     $scope.newList.push($scope.List.splice($scope.List.indexOf(indexS[0]), 1)[0]) 
    }; 

    $scope.removeMe = remove; 
    }]);

Markup

<body ng-app="App" ng-controller="MyCtrl"> 
<table> 
    <thead> 
    <th> Id </th> 
    <th> Name </th> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in List"> 
     <td >{{item.Id}}</td> 
     <td >{{item.Name}}</td> 
     <td ng-click="removeMe(item.Id)">removeme</td> 
    </tr> 
    </tbody> 
</table> 
<table> 
    <thead> 
    <th> Id </th> 
    <th> Name </th> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in newList"> 
     <td >{{item.Id}}</td> 
     <td >{{item.Name}}</td> 
    </tr> 
    </tbody> 
</table>

Plunker

источник

2016-02-04 13:40:18

Как клонировать и печатать данные в угловом

ответ

Смежные вопросы