I have a table which prints data from a JSON. Every row have an delete option.
I want to print the deleted data into a new table. I have managed to print data in console but unable to add it into view.
Below is the code:
Controller
$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);
};
View:
<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>{{item.email}}</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>{{data.email}}</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>
Data is printing in console but not in table, every time i click remove it will generate a blank row in deleted table
What I am doing wrong?
Code on github https://github.com/sahilpopli/learningAngular.git
slice returns array, so try $scope.deletedItems.push(deletedArray[0]);
Or try to concatenate the arrays by doing so: $scope.deletedItems = $scope.deletedItems.concat(deletedArray);
A possible thing that you may need to think is that if you going to have paged tables, removing the object from a list with that index could not be a good thing.
My solution to your problem would be this(using the id instead of index). This is just scratch demonstrating a possible way to achieve what is your desire.
Code
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
Related
Aim - Display a dynamic table for both rows and columns as below -
Dynamic Header - The fund codes are values for "name" from the json object array.
Dynamic rows with values for Application, Redemption and Net
JSON object :
[
{
name: 'VBIF',
application: 1000,
redemption: -200,
netAppRed: 800
},
{
name: 'VCIF',
application: 1500,
redemption: -200,
netAppRed: 800
},
{
name: 'VMPF',
application: 2000,
redemption: 0,
netAppRed: 2000
},
{
name: 'VBIF-A',
application: 800,
redemption: 100,
netAppRed: 700
},
{
name: 'VMPF-A',
application: 43540,
redemption: 12550,
netAppRed: 30990
}
]
HTML :
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Fund Code</th>
<th>Application</th>
<th>Redemption</th>
<th>Net Application Redemption</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cashflow in cashflows">
<td>{{cashflow.name}}</td>
<td>{{cashflow.application | currency}}</td>
<td>{{cashflow.redemption | currency}}</td>
<td>{{cashflow.netAppRed | currency}}</td>
</tr>
</tbody>
</table>
</div>
Current view displays :
Another option without need to change model:
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Fund Code</th>
<th data-ng-repeat="cashflow in cashflows">{{cashflow.name}} </th>
</tr>
</thead>
<tbody>
<tr >
<td>Application</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.application | currency}}</td>
</tr>
<tr >
<td>Redemption</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.redemption | currency}}</td>
</tr>
<tr >
<td>NetAppRed</td>
<td data-ng-repeat="cashflow in cashflows">{{cashflow.netAppRed | currency}}</td>
</tr>
</tbody>
</table>
</div>
Resovled it by changing the model in the controller as below -
$scope.getHeaders = function (){
var keys = [];
angular.forEach(object, function (val, key) {
if(key !== '$$hashKey') { keys.push(key); }
});
return keys;
};
$scope.getValue = function () {
var values = [];
angular.forEach(object, function (val, key) {
if(key !== '$$hashKey') { values.push(val); }
});
return values;
};
The HTML updated as below -
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th ng-repeat="(header, value) in cashflows">
{{value.name}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td ng-repeat="row in cashflows">
{{row.application}}
</td>
</tr>
<tr>
<td>Redemption</td>
<td ng-repeat="row in cashflows">
{{row.redemption}}
</td>
</tr>
<tr>
<td>Net App & Red</td>
<td ng-repeat="row in cashflows">
{{row.netAppRed}}
</td>
</tr>
</tbody>
</table>
</div>
Final Output :
you can use ng-tables to show your dynamic data
here is example
[https://www.tutlane.com/tutorial/angularjs/angularjs-tables-with-ng-table][1]
if any query ask me on comment
I'm new to Angularjs. I'm able to display the data in the front end. But when I try to capture the radio button of each row to delete the record, it gets error.
Here is my html code
<button ng-click="deleteEmployee({{usr.empId}})">Remove Employee</button>
</div>
<table border="1">
<thead>
<tr>
<th></th>
<th>Emp ID</th>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody ng-repeat="usr in users">
<tr >
<td><input type="radio" name="empId" value="{{usr.empId}}"></td>
<td>{{usr.empId}}</td>
<td>{{usr.name}}</td>
<td>{{usr.location}}</td>
</tr>
</tbody>
</table>
My angular code is
$scope.deleteEmployee = function (id) {
// Exception here
EmployeeService.deleteUser(id)
.then (function success(response){
$scope.message = 'User deleted!';
$scope.user = null;
$scope.errorMessage='';
},
function error(response){
$scope.errorMessage = 'Error deleting user!';
$scope.message='';
})
}
How can I get the id of each row. Any ideas would be very helpful for me.
You can use ng-model
<button ng-click="deleteEmployee(selectedEmployee)">Remove Employee</button>
</div>
<table border="1">
<thead>
<tr>
<th></th>
<th>Emp ID</th>
<th>Name</th>
<th>Location</th>
</tr>
</thead>
<tbody ng-repeat="usr in users">
<tr >
<td><input type="radio" ng-model="$parent.selectedEmployee" name="empId" value="{{usr.empId}}"></td>
<td>{{usr.empId}}</td>
<td>{{usr.name}}</td>
<td>{{usr.location}}</td>
</tr>
</tbody>
</table>
Using angular js on click of text, text should be editable. Currently not working. Used this library. Following code is in view page.
JS:
var app = angular.module('virVenturesAPP', ['angularUtils.directives.dirPagination','720kb.datepicker','xeditable']);//'720kb.datepicker'
var site_url = 'http://localhost/vv/';
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
HTML:
<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td ng-if="rrd.order_id==='' "> <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
I removed the following code:
ng-show="numberLoad" line 2
ng-if="rrd.order_id==='' " line 18
['angularUtils.directives.dirPagination','720kb.datepicker'] I think this line of code is the real problem
and it works:
jsfiddle
try to investigate better
<div ng-app="virVenturesAPP" ng-controller="Ctrl">
<table id="table_id" class="table table-striped table-hover table-bordered" >
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td > <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
</div>
//script
var app = angular.module('virVenturesAPP', ['xeditable']);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.rrd = {
order_id: 'awesome user'
};
});
I am trying to implement a collapsing row in my smarttable. This is a row that is only visible once the user wants to show some more detail. This is what it looks like now:
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
</thead>
<tbody>
<input type="checkbox" ng-model="show"/> {{show}}
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
<tr ng-show="show">
<td>hallo</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="20" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
Is there a way of displaying a collapsing detailrow for this table?
plunkr ref:http://plnkr.co/edit/8lSx2v?p=preview
<table st-table="displayed" class="table table-striped">
<thead>
<tr>
<th st-ratio="20">#</th>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="row in displayed">
<td>
<button ng-if="row.expanded" ng-click="row.expanded = false" class="btn btn-xs btn-default glyphicon glyphicon-chevron-down"></button>
<button ng-if="!row.expanded" ng-click="row.expanded = true" class="btn btn-xs btn-default glyphicon glyphicon-chevron-right"></button>
</td>
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
</tr>
<tr ng-if="row.expanded" ng-repeat-end="">
<td colspan="2">
<b>Balance<br /></b>
</td>
<td colspan="3" st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-left">
<div st-items-by-page="5" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
you can call a function with ng-change, and in there you expand the displayd array.
like I did in the plunker:
var limitVers = [];
for (var j = 0; j < 50; j++) {
limitVers.push(createRandomItem());
}
var addedItems = [];
for (var k = 0; k < 20; k++) {
addedItems.push(createRandomItem());
}
var expaVers = limitVers.concat(addedItems);
$scope.displayed = limitVers;
$scope.update = function(show){
show ? $scope.displayed = expaVers : $scope.displays = limitVers;
}
I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length
Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.
Count of Active Users is where user.is_user_active = true
Count of Pending Users is where user.is_user_active = false
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
<td class="hidden">{{item.id}}</td>
<td class="">{{item.name}}</td>
<td class="user-count">{{item.users.length}}</td>
</tr>
<tr ng-if="item.users.length > 0">
<td colspan="100" class="hiddenRow">
<div class="accordian-body collapse" id="store_user{{$index}}">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Is Active</th>
<th>Last Login</th>
</tr>
</thead>
<tbody class="tbl-search-data">
<tr ng-repeat="app in item.users">
<td>{{app.id}}</td>
<td>{{app.name}}</td>
<td>{{app.state}}</td>
<td>{{app.is_user_active}}</td>
<td>{{app.last_login}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Just use filter, eg
<td class="active_user_count">
{{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
{{ (item.users | filter : { is_user_active: false }).length }}
</td>
I hope I've got the syntax right, the Angular docs are down at the moment >:(