I am new to angularjs. I am facing an issue. I have a table with one radio button. When the user selects any radio button and click on the submit button, I need to show the selected rows details.
Html code:
<table>
<thead>
<tr>
<th>Select</th>
<th>First Name</th>
<th>Last Name</th>
<th>Unique Reference ID</th>
<th>Country</th>
<th>Branch</th>
<th>Card No</th>
</tr>
</thead>
<tr ng-repeat="d in Employees">
<td><input type="radio"></td>
<td>{{d.fname}}</td>
<td>{{d.lname}}</td>
<td>{{d.uniqueid}}</td>
<td>{{d.country.name}}</td>
<td> {{d.branch.name}}</td>
<td>{{d.cardno}}</td>
</tr>
</table>
<table>
<tr>
<td><input type="button" value="Edit" ng-click="Edit()"></td>
</tr>
</table>
controller code:
$scope.Edit=function()
{
//need id of selected row ?
};
Something like this:
<input type="radio" ng-click="editData.employee = d">
And the controller:
$scope.editData = {};
$scope.Edit = function() {
var id = $scope.editData.employee.id;
};
I just answered another question about how it affects your code that ng-repeat creates a new scope for each list item, which is why you need the editData object for it to work. It could help you understand why you need it: Angular replace data from ng-repeat item
You'll want to use ng-model and ng-value attributes in your radio input; see http://docs.angularjs.org/api/ng/input/input%5Bradio%5D.
You'll also want to format your html with at least some semblance of sanity.
Related
I want to disabled the button Dissolve if the field in the status column is close or vise versa.
I tried applying ng-module n ng- disabled but something went wrong.
If anybody knows how to do it in Angularjs then plz help me out
<table>
<tr>
<th>Ticketid</th>
<th>status</th>
<th>Dissolve</th>
</tr>
<tr>
<td>12345</td>
<td>Close</td>
<td><button>Dissolve</button></td>
</tr>
<tr>
<td>4321</td>
<td>open</td>
<td><button>Dissolve</button></td>
</tr>
</table>
You need to use ng-if and ng-disabled together,
<tr>
<td>4321</td>
<td>open</td>
<td ng-if="status ==='close'"><button ng-disabled="true">Dissolve</button></td>
</tr>
I have example code below where I am supposed to create a list of items.
<div ng-hide="listTrigger">
<!--FIRST TABLE-->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="code" class="sortable">
Product Name
</th>
<th sortable="placed" class="sortable">
Qty
</th>
<th class="st-sort-disable th-dropdown">
Price
</th>
<th sortable='total.value' class="sortable">
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="40%">
<select class="form-control" ng-model="prod.uid">
<option selected disabled>Select Product</option>
<option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option>
</select>
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.qty" class="form-control">
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.price" class="form-control">
</td>
<td width="10%">
<input type="number" min="1" max="100" ng-model="prod.split" class="form-control">
</td>
<td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td>
</tr>
</tbody>
</table>
<!--SECOND TABLE-->
<table ng-show="newProducts.length!=0" class="table">
<thead>
<tr>
<th >
Product Name
</th>
<th >
Qty
</th>
<th >
Price
</th>
<th >
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="newProduct in newProducts">
<td width="60%" ng-bind="newProduct.uid"></td>
<td width="10%" ng-bind="newProduct.qty"></td>
<td width="10%"ng-bind="newProduct.price"></td>
<td width="10%" ng-bind="newProduct.split"></td>
<td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td>
</tr>
</tbody>
</table>
Output
but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list
In JS I am getting all details from input fields and settinf to an object prod and then pushing it in to an array newProducts.
Later in the table I am using ng-repeat to repeat items in newProducts array. The top table and bottom table are connected in no other way and I cannot figure out why values are chaging in bottom table when they are changed in input fields. Also while trying to add it one more time, it throws an error.
jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D
Here is the JS to add new item
//function to add new product while creating
$scope.addNewProduct= function(id){
$scope.newProducts.push($scope.prod);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
I tried console.log to log newProducts array in console, it is getting updated with new array , but not showing up in second table. Please help!
use angular copy.
angular $scopes are two way binded.. the changes u make in first table will be reflected in second table as you are pushing $scope.prod which is two way binded.
Using $scope can be very tricky. I'm not the best in Angular but i have no idea
$scope.newProducts.push($scope.prod);
if you are using here the $scope of the function or the $scope of the Controller.
Put in at the very top of your Controller "var vm=$scope", and in your html use "Controller as vm".
So if you are then there, we can see if the problem still exists.
Angular variables are reference type. So you can use angular.copy() to overcome from this issue. Below the code.
$scope.addNewProduct= function(id){
var products = angular.copy($scope.prod);
$scope.newProducts.push(products);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
Hope it will help you thanks.
I have two tables named products and customers:-
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Product Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in service track by $index" ng-class="{'ISselected': isSelected(row, $index)}" ng-click="selectedRow(row, $index)">
<td>{{row}}</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Customer Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in customers track by $index">
<td>{{row}}</td>
</tr>
</tbody>
</table>
And a button:-
<button type="button" class="btn btn-info">Add</button>
My directive code:-
scope.services = [];
scope.customers = [];
scope.selectedRowID = null;
scope.selectedRow = function(rowID){
scope.selectedRowID = scope.selectedRowID == rowID ? null : rowID;
}
scope.isSelected = function(rowID){
return (scope.selectedRowID == rowID);
}
What I want here is when I select a particular row/value from the 'products' table and press 'add' button then that row/value gets pushed or added to my customers' table. The data inside from both tables are coming from the backend.
You don't need a directive, rather controller functions will do the job by pushing the selected row into customer data.
Here is basic fiddler, which perform similar stuff. hope it helps.
What i understand is for every row you have ADD button so that you can transfer data from one table to another.
First add "ADD" button inside table for every row.
Then Add the ng-click directive to ADD button
<button type="button" class="btn btn-info" ng-click="transferData($index)">Add</button>
Then add this function to your Directive:
$scope.transferData=function(index){
$scope.customers.push($scope.services [index]);
};
This will meet your requirements.
I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not.
The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful.
In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.
<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.
<tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
JSFiddle Demo
HTML:
<div ng-app="myapp" ng-controller="myctrl">
<table>
<thead>
<tr>
<td>Name</td>
<td>DaysUp</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.daysup}}</td>
<td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
</tr>
</tbody>
</table>
</div>
SCript:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.users =[
{'name':'xyz','daysup':2,'status':1},
{'name':'abc','daysup':4,'status':2},
{'name':'klm','daysup':6,'status':3},
{'name':'yrt','daysup':9,'status':4}
];
$scope.imageurls = [
'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
'http://pix.iemoji.com/sbemojix2/0702.png',
'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
'http://pix.iemoji.com/sbemojix2/0701.png'
];
});
Plunker Demo
I'm not sure how to do this in angular, after coming from jquery.
I have a table:
<div class="col-xs-10">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody ng-repeat="val in data">
<tr>
<td>val.Time</td>
<td>val.Distance</td>
<td ng-click="callmethod()"><img src="delete"></td>
</tr>
</tbody>
</table>
</div>
Essentially I want the callmethod() to know which row is being clicked so that I can make a update in the model in my controller. What is the right way to do this?
You can use the $index property:
callmethod($index)
Then on your controller you would do something like:
function callmethod(index) {
var foo = $scope.data[index];
}
Change that ng-click to this:
<td ng-click="callmethod(val)"><img src="delete"></td>
You'll get the whole val object when that method gets called.