I want to do something like this:
As you can see they must be in the same html page and should transfer rows without refreshing the entire page again.
Someone can give me some help?
Here's a screen shot of the results:
Here's the important parts of the HTML:
<body ng-controller="MainCtrl">
<table border=1>
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table1">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
<br>
<button ng-click="transferRight()">Transfer ></button>
<br>
<button ng-click="transferLeft()">< Transfer</button>
<br>
<br>
<table border=1>
<thead>
<tr>
<th colspan="2">Table 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in table2">
<td><input type="checkbox" ng-model="item.checked"></td>
<td><span ng-bind="item.data"></span></td>
</tr>
</tbody>
</table>
</body>
Here's the important parts of the javascript/angularjs:
app.controller('MainCtrl', function($scope, $filter) {
$scope.table1 = [
{checked:false, data:'Data 1'},
{checked:true, data:'Data 3'},
{checked:true, data:'Data 4'},
{checked:false, data:'Data 6'},
{checked:false, data:'Data 7'}];
$scope.table2 = [
{checked:false, data:'Data 2'},
{checked:false, data:'Data 5'}];
$scope.transferRight = function() {
angular.forEach($filter('filter')($scope.table1, {checked: true}), function(value) {
value.checked = false;
$scope.table2.unshift(value);
$scope.table1.splice($scope.table1.indexOf(value), 1);
});
};
$scope.transferLeft = function() {
angular.forEach($filter('filter')($scope.table2, {checked: true}), function(value) {
value.checked = false;
$scope.table1.unshift(value);
$scope.table2.splice($scope.table2.indexOf(value), 1);
});
};
});
Here's a link to a working Plunker, http://plnkr.co/edit/qoARS4mtp5CQQnf1kogA?p=preview
You could look at this code. It's completely made with Javascript and html.
It's called a picklist btw.
just use append() or appendTo()
$(".toRight").click(function () {
$("#table1 input:checked").closest("tr").appendTo("#table2");
});
Here full code
Related
I have the following knockout js code, for some reason, the booking.text is not displaying, see how column 1 has no text.
Can anyone advice what I have done wrong and how this can be fixed?
You can see the running code in JS Fiddle here. http://jsfiddle.net/w3fxtdq8/18/
Below is the code I am using
var myViewModel = {
bookings: ko.observableArray([{
text: 'booking 1',
bookingId: 123
},
{
text: 'booking 2',
bookingId: 123
},
{
text: 'booking 3',
bookingId: 123
}
])
};
ko.applyBindings(myViewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody data-bind="template: {name: 'booking-table-row-template', foreach: 'bookings', as: 'booking'}">
</tbody>
</table>
<script type="text/html" id="booking-table-row-template">
<tr>
<td data-bind="text: booking.text"></td>
<td>
Remove
</td>
</tr>
</script>
You shouldn't put quotes around a variable name. The clue is in how many rows got rendered - 8 (same as the number of letters in the word 'bookings') rather than 3 (size of your array).
You made bookings a string.
var myViewModel = {
bookings: ko.observableArray([{
text: 'booking 1',
bookingId: 123
},
{
text: 'booking 2',
bookingId: 123
},
{
text: 'booking 3',
bookingId: 123
}
])
};
ko.applyBindings(myViewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody data-bind="template: {name: 'booking-table-row-template', foreach: bookings, as: 'booking'}">
</tbody>
</table>
<script type="text/html" id="booking-table-row-template">
<tr>
<td data-bind="text: booking.text"></td>
<td>
Remove
</td>
</tr>
</script>
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 have nested ng-repeats like below :
<table class="table table-striped table-bordered" border=1>
<tbody ng-repeat="list in globalList">
<tr ng-repeat="child in list">
<td ng-repeat="baby in child">
{{baby.second}}
</td>
</tr>
</tbody>
</table>
What I'd like to have is a table as header the baby.title property and as data baby.second
Something that looks like to this :
|baby.title | baby.title | ... | ->HEADERS
--------------------------------
|baby.second| baby.second| ... |
|baby.second| baby.second| ... |
|baby.second| baby.second| ... | ->DATAS
My data structure in picture :
I don't know if that's possible with my data structure tho and I can hardly change it.
Any advices ?
UPDATE: Check this code. I added new variable in JS $scope.longestArray
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.globalList = [
[
[{
'second': "dataAA",
'title': "titleA"
}, {
'second': "dataAB",
'title': "titleA"
}]
],
[
[{
'second': "dataBA",
'title': "titleB"
}, {
'second': "dataBB",
'title': "titleB"
}, {
'second': "dataBC",
'title': "titleB"
}]
],
[
[{
'second': "dataCA",
'title': "titleC"
}]
]
];
$scope.longestArray = angular.copy($scope.globalList).sort(function(a, b) {
return b[0].length - a[0].length;
})[0][0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<thead>
<tr>
<th ng-repeat="list in globalList">
{{list[0][0].title}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="baby in longestArray">
<td ng-repeat="list in globalList">
{{list[0][longestArray.indexOf(baby)].second}}
</td>
</tr>
</tbody>
</table>
</body>
Plunker
I have the following
<tbody ng-repeat="history in orderHistory">
<tr>
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>
it seems that the second ng-repeat is not working and {{items.quantity}} or items . anything does not end up showing.
any ideas?
When i just test it out like so it works
<div ng-repeat="history in orderHistory">
<div ng-repeat="items in history.orderedItems">
{{items.product_description}}
</div>
</div>
but i really need it inside the table
I tried the following:
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>
and still does not work
UPDATED Answer
http://plnkr.co/edit/x0ZxWSy6JN3fo961NbQX?p=preview
The following should get you going.
<table ng-controller="myCtrl">
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<td ng-repeat-start="items in history.orderedItems">
{{items.product_description}}<//td>
<td ng-repeat-end>{{items.quantity}}</td>
</tr>
</tbody>
</table>
OLD ANSWER -----
Kept previous answer is kept for historical reasons due to comments.
The problem is tbody - not supposed to be repeated. I had a similar problem with <p> just like what you see in here.
Here is a fiddle http://jsfiddle.net/yogeshgadge/02y1jjau/1/ where it works - tbody changed to div.
Here is one demo where tbody does NOT work http://jsfiddle.net/yogeshgadge/2tk3u7hq/4/
Nested ng-repeat
Try this - moved the ng-repeat on <tr>
<tbody>
<tr ng-repeat="history in orderHistory">
<td>{{history.reference_code}}</td>
<div ng-repeat="items in history.orderedItems">
<td>{{items.product_description}}</td>
<td>{{items.quantity}}</td>
</div>
<td>
</tr>
</tbody>
This could work properly.
<table>
<thead>
<tr>
<th></th>
<th>Claim Id</th>
<th>Job Number</th>
<th>Project</th>
<th>Created On</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="jobData in createJobResponseData.data">
<td class="counterCell"></td>
<td>{{jobData.claimId}}</td>
<td>{{jobData.jobNumber}}</td>
<td>{{jobData.project}}</td>
<td>{{jobData.createdOn}}</td>
<td >
<div class="counterCellDiv" ng-repeat="error in jobData.errorList">
{{error.errorMessage}}
</div>
</td>
</tr>
</tbody>
$scope.createJobResponseData = {
'status': '200',
'message': 'Request processed successfully',
'data': [
{
'claimId': 'data1',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'nn001',
'project': 'pro0',
'repairStatus': '5'
},
{
'claimId': 'ASD',
'claimLineId': '1',
'errorList': [{
'errorCode': ')01',
'errorMessage': 'accidentDescription cannot be blank'
}, {
'errorCode': '(01)',
'errorMessage': 'abcd cannot be blank'
}],
'insertedIntoDb': true,
'jobNumber': '',
'project': 'asd',
'repairStatus': '5'
},
{
'claimId': 'oiqweo',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'qoweiu',
'project': 'asq',
'repairStatus': '5'
},
{
'claimId': 'SDDDASD',
'claimLineId': '1',
'errorList': null,
'insertedIntoDb': true,
'jobNumber': 'asdqio',
'project': 'kalsdjjk',
'repairStatus': '5'
}
]
}