Hey guys I want to delete item by id in an AngularJS function. How can I get id from delete button?
<table data-ng-app="myApp" data-ng-controller="myController">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>School</th>
<th>Gender</th>
<th>Email</th>
<th>Update</th>
<th>Delete</th>
</tr>
<tr data-ng-repeat="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.school}}</td>
<td>{{student.gender}}</td>
<td>{{student.email}}</td>
<td><a href="#" id="tagaUpdate" >Update</a></td>
<td>Delete</td>
</tr>
</tbody>
</table>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller("myController", function ($scope) {
$scope.deleteItem = function (id) {
alert(id);//it doesn't show alert here
};
});
I think the problem is here data-ng-click="deleteItem({{student.id}})". But when I check it shows me value data-ng-click="deleteItem(5).
replace
Delete
by
Delete
Related
I have an array of object, which I am showing in table through ng-repeat.
<table>
<thead>
<tr>
<th ng-repeat="col in columnHeaders">{{col}}</th> //['Name', 'Bank Name','Code', 'Type','Status'];
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col]}}</td> //['name', 'bankName','code', 'type','isActive'];
</tr>
</tbody>
</table>
I am using ng-repeat in <th></th> and <td></td> too. But my columnHeaders name and row property(columnRows) names are different. I want to change my property name to same as column header name while using ng-repeat on <td></td> tag.
I am thought of using alias 'as' but not sure how to use it for each element.
Can anyone help me?
Instead of using two columnRows and header rows(array of string) , make a single array of keyHash(column data key and header string )
check running fiddle for this
and code be like :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<th ng-repeat="col in columnRows">{{col.displayStr}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col.key]}}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.columnRows = [
{key:'name',displayStr:'Name'},
{key:'bankName',displayStr:'Bank Name'},
{key:'code',displayStr:'Code'},
{key:'type',displayStr:'Type'},
{key:'isActive',displayStr:'Status'}
]
$scope.data = [
{
name:'James',
bankName:'RBL',
code:'1234',
type:'Saving',
isActive:true
},
{
name:'Riyan',
bankName:'DSB',
code:'1234',
type:'Current',
isActive:true
}
];
});
</script>
</body>
</html>
I have below table,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select>
<option style="background-color:'#FF0000'">weight</option>
<option style="background-color:'#FF0000'">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td>{{data.type}}</td>
<td>{{data.name}}</td>
<td>{{data.size}}</td>
<td>{{data.price}}</td>
<td>{{data.qty}}</td>
</tr>
</tbody>
</table>
</div>
The controlling part which take the data is as below,
$scope.idDetails = function(product){
var ids={
mainId : product.mainId,
childId : product.childId
};
console.log(ids.childId);
commerceService.getVariants(ids.childId).
success(function(data) {
toastr.success('Successfully saved', 'Awsome!', {
closeButton: true
});
$scope.variants=[{
type: "cloth",
name: data[0].name,
size: "10",
price: data[0].price,
qty: "1"
}];
console.log($scope.variants.name);
}).error(function(err) {
toastr.error('Saving detals was not Successful', 'Warning', {
closeButton: true
});
});
}
Everything works fine, but I want to use a Angular Js inline editor to edit the rows in the table. First the user can see the data which I get from the controller, then the user should be able to edit the rows. I have searched through the internet but I found inline editing tables which use button to edit and save. I don't want any buttons in my table rows. I want to bind data with the model. So that at the end I can take the data from the table via the model. Please help
After searching in many areas I found an inline edit that do not need any button to edit. The code is as below,
<div class="md-dialog-main">
<table class="me-hours-table">
<thead>
<th>Product Type</th>
<th>Product Name</th>
<th>
<select ng-model="selection">
<option value="weight">weight</option>
<option value="size">size</option>
</select>
</th>
<th>Price</th>
<th>Qty</th>
</thead>
<tbody>
<tr ng-repeat="data in variants">
<td
inline-edit="data.sku"
inline-edit-callback="skuUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
ng-model="data.name">{{data.name}}</td>
<td
inline-edit="data.sizeOrweight"
inline-edit-callback="sizeUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.price"
inline-edit-callback="priceUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
<td
inline-edit="data.qty"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
<td
inline-edit-callback="qtyUpdateHandler(newValue)"
inline-edit-btn-edit=""
inline-edit-on-blur="save"
inline-edit-on-click></td>
</tr>
</tbody>
</table>
</div>
The controller is as below,
$scope.skuUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.sizeUpdateHandler = function(newValue) {
console.log(newValue);
};
$scope.priceUpdateHandler = function(newValue) {
console.log(newValue);
};
Please install ng-inline-edit to use this method. Click
https://github.com/tameraydin/ng-inline-edit to install ng-inline-edit
I'm trying to create a prototype that populates a list of unpaid invoices using ng-repeat. Within this, I am creating an input for each invoice. I want to be able to have a user input $ amounts into these inputs and then display a total of all inputs. Going off of this example: http://jsfiddle.net/d5ug98ke/9/ I cannot get it to work as it does in the fiddle. Here is my code:
<table class="table table-striped header-fixed" id="invoiceTable">
<thead>
<tr>
<th class="first-cell">Select</th>
<th class="inv-res2">Invoice #</th>
<th class="inv-res3">Bill Date</th>
<th class="inv-res4">Amount</th>
<th class="inv-res5">Amount to Pay</th>
<th class="inv-res6"></th>
</tr>
</thead>
<tbody>
<tr ng-if="invoices.length" ng-repeat="item in invoices | filter: {status:'Unpaid'}">
<td class="first-cell"><input type="checkbox" /></td>
<td class="inv-res2">{{item.invoiceNum}}</td>
<td class="inv-res3">{{item.creationDate}}</td>
<td class="inv-res4" ng-init="invoices.total.amount = invoices.total.amount + item.amount">{{item.amount | currency}}</td>
<td class="inv-res5">$
<input ng-validate="number" type="number" class="input-mini" ng-model="item.payment" ng-change="getTotal()" min="0" step="0.01" /></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr class="totals-row" >
<td colspan="3" class="totals-cell"><h4>Account Balance: <span class="status-error">{{invoices.total.amount | currency }}</span></h4></td>
<td class="inv-res4"><h5>Total to pay:</h5></td>
<td class="inv-res5">${{total}}</td>
<td class="inv-res6"></td>
</tr>
</tbody>
</table>
And the Angular:
myBirkman.controller('invoiceList', ['$scope', '$http', function($scope, $http) {
$http.get('assets/js/lib/angular/invoices.json').success(function(data) {
$scope.invoices = data;
});
$scope.sum = function(list) {
var total=0;
angular.forEach(list , function(item){
total+= parseInt(item.amount);
});
return total;
};
$scope.total = 0;
$scope.getTotal = function() {
$scope.invoices.forEach(function(item){
$scope.tot += parseInt(item.payment);
});
};
}]);
Any help would be appreciated. I dont necessarily need to use the method in the fiddle if someone has a better idea.
It seems there are two issues. First a simple typo:
$scope.tot += parseInt(item.payment, 10);
should be
$scope.total += parseInt(item.payment, 10);
And you should also reset $scope.total to 0 at the beginning of getTotal().
Edit: The way you did it, you always have to remember to update the total when something changes. Instead, you could let getTotal just return the total and write {{ getTotal() }} in the template. You don't have to trigger getTotal() in via ng-change then. If you don't have a lot of inputs you shouldn't worry about performance here.
I'm trying to use ng-switch in AngularJS to expand a row in a table list to show another table (containing more details about that list item) when it's clicked.
However, I'm having trouble displaying the nested table. I've noticed that the problem only happens with nested tables. If I'm using ng-switch to expand a td instead of a table, it works as expected.
Here's a JSFiddle and my code to illustrate the problem: fiddle
The html:
<body ng-app="listAndDetails">
<div>
<table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-click="toggleSelected()" ng-switch on="isSelected(user)">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<table>
<tr>
<td>Country</td>
<td>Address</td>
<td>Description</td>
</tr>
<tr>
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</table>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ListAndManyDetailsCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</tbody>
</table>
</div>
</body>
The javascript:
angular.module('listAndDetails', [])
.value('users', [
{ name:'Damien', email:'damien#domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
{ name:'Alex', email:'alex#domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
])
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
.controller('ListAndManyDetailsCtrl', function ($scope, users) {
$scope.users = users;
})
.controller('UserCtrl', function ($scope) {
$scope.toggleSelected = function () {
$scope.selected = !$scope.selected;
};
$scope.isSelected = function (user) {
return $scope.selected;
};
});
The div on top attempts to show a nested table upon clicking the list item, but nothing happens.
The div at the bottom attempts to show child td items upon clicking the list item and it works exactly as expected.
Does anyone have any idea what the problem is when I'm trying to expand to show a nested table using ng-switch? And how to solve it?
You have a two errors in your code.
First
In controller ListAndOneDetailCtrl on ng-click you don't have a function toggleSelected.
Second
In first table with controller ListAndOneDetailCtrl you don't have tag td in nested table.
See correct code in jsfiddle
angular.module('listAndDetails', [])
.value('users', [
{ name:'Damien', email:'damien#domain.com', desc:'Damien details go here...', country:'US', address:'address1'},
{ name:'Alex', email:'alex#domain.com', desc:'Alex details go here...', country:'UK', address:'address2'}
])
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
.controller('ListAndManyDetailsCtrl', function ($scope, users) {
$scope.users = users;
})
.controller('UserCtrl', function ($scope) {
$scope.toggleSelected = function () {
$scope.selected = !$scope.selected;
};
$scope.isSelected = function (user) {
return $scope.selected;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="listAndDetails">
<div>
<table class="table table-bordered" ng-controller="ListAndOneDetailCtrl">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-click="selectUser(user)" ng-switch on="isSelected(user)">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>
<table>
<tr>
<td>Country</td>
<td>Address</td>
<td>Description</td>
</tr>
<tr>
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="ListAndManyDetailsCtrl">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>e-mail</th>
</tr>
</thead>
<tbody ng-repeat="user in users" ng-controller="UserCtrl" ng-click="toggleSelected()" ng-switch on="isSelected()">
<tr>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
<tr ng-switch-when="true" class="light-gray">
<td>{{user.country}}</td>
<td>{{user.address}}</td>
<td>{{user.desc}}</td>
</tr>
</tbody>
</table>
</div>
</body>
There were two problems:
you needed a td section enclosing your table;
<tr>
<td>
<table>
<!-- table information -->
</table>
</td>
</tr>
the controller needed some modifications so that the selected user could have a value.
.controller('ListAndOneDetailCtrl', function ($scope, users) {
$scope.users = users;
$scope.toggleSelected = function(user) {
$scope.selectedUser = user;
};
$scope.selectUser = function (user) {
$scope.selectedUser = user;
};
$scope.isSelected = function (user) {
return $scope.selectedUser === user;
};
})
Here's an updated fiddle: https://jsfiddle.net/jp43agsb/2/
I am trying to get header text in array, however with following I am getting value plus th tag i.e [<th>value1</th>, <th>value2</th>], I want to get [value1, value2].
$('#header').children().each(function(){this.html});
Here is how my HTML looks like:
<tr bgcolor="#cdb79e" id="header">
<th>Origin Code</th>
<th>Description</th>
<th>Notes</th>
<th>Domain</th>
<th>Tier</th>
<th>Engine</th>
<th>Network</th>
<th>Platform</th>
<th>Expansion Tool</th>
<th>Date</th>
<th>Imps</th>
<th>Clicks</th>
<th>Engine CTR</th>
<th>Average Position</th>
<th>Picks</th>
<th>LP CTR</th>
<th>GSL Picks</th>
<th>GSL LP CTR</th>
<th>Merchant Picks</th>
<th>Merchant LP CTR</th>
<th>CPC</th>
<th>RPC</th>
<th>RPP</th>
<th>Cost</th>
<th>Total Rev</th>
<th>Margin</th>
<th>ROI</th>
</tr>
Assuming your HTML were to look something like this:
<table>
<thead>
<tr id='header'>
<th>Value1</th>
<th>Value2</th>
</tr>
</thead>
</table>
You could use something like this to build an array of the <th> elements' text:
var headerArray = [];
$('#header').children().each(function(){
headerArray.push($(this).text());
});
console.log(headerArray);