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>
Related
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 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
I have two tables in my HTML. I want to take data from one list and pass it to another. I can't do the same ng-repeat call because on the second table I have one individual customer and I just want to display his ID. On the first table, I have all the customers.
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv()">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</b>
</tr>
<td ng-model="id">{{id}}</td>
</table>
</div>
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv(user)">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
$scope.viewUserDiv = function(user) {
if (user) {
$scope.userDiv = true;
$scope.userDivUser = user;
}
}
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</>
</tr>
<td ng-model="userDivUser">{{userDivUser.id}}</td>
</table>
<div>
<table >
<thead>
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody >
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
I have a requirement to show / hide table row. This form should hide the car model initially and show only Honda and Toyota. when you click Honda, it should show all the honda's model. How to achieve this in angualr js. Please help me.
you can use ng-hide and ng-show option of angular js. It takes boolean which can be initiated no click event.
<table >
<thead ng-show="showHonda">
<tr >
<th>Honda</th>
</tr>
</thead>
<tbody ng-hide="showHonda">
<tr>
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<thead ng-show="showToyota">
<tr>
<th>Toyota</th>
</tr>
</thead>
<tbody ng-hide="showToyota">
<tr>
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
and on ng-click event change the value of showHonda and showToyota accordingly.
<table ng-app="myApp" ng-controller="customersCtrl">
<thead>
<tr data-ng-click="ShowHonda=!ShowHonda">
<th>Honda</th>
</tr>
</thead>
<tbody>
<tr data-ng-show="ShowHonda">
<td>CRV</td>
<td>HRV</td>
<td>Accord</td>
</tr>
</tbody>
<tr data-ng-click="ShowToyota=!ShowToyota">
<th>Toyota</th>
</trdata-ng-click>
</thead>
<tbody>
<tr data-ng-show="ShowToyota">
<td>Camry</td>
<td>Corolla</td>
</tr>
</tbody>
</table>
Script :-
var myAngApp = angular.module('myApp', []);
myAngApp.controller('customersCtrl', function ($scope) {
$scope.ShowHonda = false;
$scope.ShowToyota = false;
});
This is My Code:
<div>
<input type="search" class="form-control" placeholder="Search Student" ng- model="stdsearch" />
</div>
<table class="table" >
<thead>
<tr>
<th><input type="checkbox" ng-model="master"></th>
<th>Admission No</th>
<th>Student Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in ClassStudents | filter:stdsearch">
<td><input id="checkSlave" type="checkbox" ng-checked="master" ng-model="student.isselected" aria-label="Slave input"></td>
<td>{{student.Admission_no}}</td>
<td>{{student.First_Name}} {{student.MiddleName}} {{student.Last_Name}}</td>
</tr>
</tbody>
</table>
Here My Query is : I want to Check Only Filtered Rows in table When i check Master Checkbox(th).but here selected all rows of table when i remove Search text in search box. Pls Suggest me. 10Q.
Here what I have tried :
The plunker is here
I have created sample data as per HTML.
Use 'last1' as search value. You will get an idea.
$scope.ClassStudents = [{Admission_no :1,First_Name:'first1' ,MiddleName: 'middle1',Last_Name:'last1'},
{Admission_no :1,First_Name:'first2' ,MiddleName: 'middle1',Last_Name:'last1'},
{Admission_no :1,First_Name:'first3' ,MiddleName: 'middle2',Last_Name:'last2'},
{Admission_no :1,First_Name:'first4' ,MiddleName: 'middle3',Last_Name:'last1'}
];
$scope.checkUncheck = function(masterCheck){
angular.forEach( $scope.ClassStudents,function(value,key){
if(masterCheck && !$scope.stdsearch){
value.master = true;
}else{
value.master = false;
}
})
}
filter('customFilter',function(){
return function(input,masterCheck,stdsearch){
angular.forEach(input,function(value,key){
if(stdsearch){
if(masterCheck){
value.master = true;
}else{
value.master = false;
}
}
})
return input;
}
})
<body ng-controller="testCtrl">
<input type="text" ng-model="stdsearch">
<table class="table" >
<thead>
<tr>
<th><input type="checkbox" ng-model="master" ng-change = "checkUncheck(master) "></th>
<th>Admission No</th>
<th>Student Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in ClassStudents |filter : stdsearch| customFilter : master : stdsearch">
<td><input id="checkSlave" type="checkbox" ng-checked="student.master" ng-model="student.isselected" aria-label="Slave input"></td>
<td>{{student.Admission_no}}</td>
<td>{{student.First_Name}} {{student.MiddleName}} {{student.Last_Name}}</td>
</tr>
</tbody>
</table>
</body>
Please let me know if there is any error.