Xeditable not working AngularJS - javascript

http://plnkr.co/edit/bQyQNBcId9sp1l69UvTO?p=preview
On click of edit the value of Id is not getting passed to the editable text box for Id.
Also it shows the read only value as well a editable text box.
Please help!
Here is the code:
HTML:
<!DOCTYPE html>
<html ng-app="xeditableTable">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.6.0/css/xeditable.css"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script src="app%20.js"></script>
<script src="xeditable.js"></script>
</head>
<body ng-controller="XeditableTableController">
<form editable-form name="formTable" onaftersave="saveTable(usersTable)" oncancel="cancel()">
<table class="table table-bordered table-hover table-condensed table-striped">
<tr>
<td> Id</td>
<td>Name</td>
<td>Options</td>
<td>Comment</td>
<td><span ng-show="formTable.$visible">Action</span></td>
</tr>
<tr ng-repeat="user in usersTable">
<td>
<span editable-number="user.Id" e-form="formTable">
{{user.Id}}
</span>
</td>
<td>
<span editable-text="user.Name" e-form="formTable">
{{user.Name}}
</span>
</td>
<td>
<span editable-select="user.Option" e-form="formTable" e-ng-options="o.value as o.text for o in options">
{{showOptions(user)}}
</span>
</td>
<td>
<span editable-textarea="user.Comment" e-form="formTable">
{{user.Comment}}
</span>
</td>
<td>
<button type="button" ng-show="formTable.$visible" class="btn btn-danger pull-right">Delete</button>
</td>
</tr>
</table>
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!formTable.$visible" ng-click="formTable.$show() ; editUsersTableFunc(usersTable)">
Edit
</button>
</div>
<div class="btn-edit" ng-show="formTable.$visible" >
<button type="submit" class="btn btn-default" ng-disabled="formTable.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="formTable.$waiting" ng-click="formTable.$cancel()">
Cancel
</button>
</div>
</form>
</body>
</html>
JS:
function XeditableTableController($scope, $filter) {
$scope.usersTable = [{ Id: '1', Name: 'a', Option: '2', Comment: 'Awesome' },
{ Id: '2', Name: 'b', Option: '1', Comment: 'Amazing' },
{ Id: '3', Name: 'c', Option: '4', Comment: 'MindBlowing' },
{ Id: '4', Name: 'd', Option: '3', Comment: 'Like cellRenderers, cellEditor components ' },
{ Id: '5', Name: 'e', Option: '2', Comment: 'Like cellRenderers, cellEditor components ' }];
$scope.options = [
{ value: 1, text: 'Option1' },
{ value: 2, text: 'Option2' },
{ value: 3, text: 'Option3' },
{ value: 4, text: 'Option4' }
];
$scope.showOptions = function (user) {
var selected = [];
if (user.Option) {
selected = $filter('filter')($scope.options, { value: user.status });
}
return selected.length ? selected[0].text : 'Not set';
};
$scope.editing = false;
$scope.newField = {};
$scope.editUsersTableFunc = function (usersTable) {
$scope.newField = angular.copy(usersTable);
}
$scope.saveTable = function (usersTable) {
debugger;
$scope.newField = angular.copy(usersTable);
$scope.usersTable = $scope.newField;
}
$scope.cancel = function () {
$scope.usersTable = $scope.newField;
}
}
XeditableTableController.$inject = ['$scope', '$filter'];
angular.module('xeditableTable', ['xeditable']);
angular.module('xeditableTable').controller('XeditableTableController', XeditableTableController);

You are not hiding your fields anywhere that are being displayed. So table data should be like this
<td>
<span editable-number="user.Id" e-form="formTable" ng-show="!formTable.$visible">
{{user.Id}}
</span>
</td>
<td>
<span editable-text="user.Name" e-form="formTable" ng-show="!formTable.$visible">
{{user.Name}}
</span>
</td>
<td>
<span editable-select="user.Option" e-form="formTable" e-ng-options="o.value as o.text for o in options" ng-show="!formTable.$visible">
{{showOptions(user)}}
</span>
</td>
<td>
<span editable-textarea="user.Comment" e-form="formTable" ng-show="!formTable.$visible">
{{user.Comment}}
</span>
</td>

It's because in the userTable the IDs where strings rather than numbers and you were trying to put it into a numeric field. This is the new version of userTable:
$scope.usersTable = [{ Id: 1, Name: 'a', Option: '2', Comment: 'Awesome' },
{ Id: 2, Name: 'b', Option: '1', Comment: 'Amazing' },
{ Id: 3, Name: 'c', Option: '4', Comment: 'MindBlowing' },
{ Id: 4, Name: 'd', Option: '3', Comment: 'Like cellRenderers, cellEditor components ' },
{ Id: 5, Name: 'e', Option: '2', Comment: 'Like cellRenderers, cellEditor components ' }];
New version: http://plnkr.co/edit/LXcuRNuAXVaKDA6VvOtW?p=preview
Another option is instead to change the field to editable-text instead of editable-number.

Related

Knockoutjs: Checkbox list many to many Relation

I have a Knockout model that have created in the snippet below.
What I'm trying to do is create a many to many relationship in a popup dialog from option rows that ive added to a option(I'm hoping this make sense when you look at the jsfiddler). When you click on the lookup link on the children column on the rows I list ALL the option rows in a dialog and with a check box list and allow the user to select the children relations to the to a specific row, hence a many to many relationship between rows.
I have defaulted the data of of my desired as a output in the first option group but I am not sure how to make this work.
I'm not sure if I'm going about this correct way and am hoping some Knockout guru can point me in the right direction to get this functionality in the popup.
/*Select Options*/
var initialData = [{
title: "User Band",
productoptionrows: [{
id: "1",
title: "25-100",
related: [{
id: "4",
title: '1 Year'
}, {
id: "5",
title: '2 Year'
}, {
id: "6",
title: '3 Year'
}]
}, {
id: "2",
title: "101-250",
related: [{
id: "7",
title: '1 Year'
}, {
id: "8",
title: '2 Year'
}, {
id: "9",
title: 'qwe'
}]
}, {
id: "3",
title: "251-500",
related: [{
id: "10",
title: '1 Year'
}, {
id: "11",
title: '2 Year'
}, {
id: "12",
title: '3 Year'
}]
}]
}, {
title: "Please select the number of years license",
productoptionrows: [{
id: "4",
title: "1 Year",
related: []
}, {
id: "5",
title: "2 Year",
related: []
}, {
id: "6",
title: "3 Year",
related: []
}, {
id: "7",
title: "1 Year",
related: []
}, {
id: "8",
title: "2 Year",
related: []
}, {
id: "9",
title: "3 Year",
related: []
}, {
id: "10",
title: "1 Year",
related: []
}, {
id: "11",
title: "2 Year",
related: []
}, {
id: "12",
title: "3 Year",
related: []
}]
}];
$(document).ready(function () {
/*Models*/
var mappingOptions = {
'productoptionrows': {
create: function (options) {
return new productoptionrow(options.data);
}
}
};
var mappingOptionsPR = {
create: function (options) {
return new productoptionrow(options.data);
}
};
var productoptionrow = function (por) {
var self = ko.mapping.fromJS(por, {}, this);
self.relatedcsv = ko.computed(function () {
return $(por.related).map(function () {
return this.id;
}).get().join(',');
}, self);
self.selectedrelated = ko.observableArray($(por.related).map(function () {
return this.id;
}).get());
};
var ProductOptionModel = function (data) {
var self = this;
self.productoptions = ko.mapping.fromJS(data, mappingOptions);
self.isOpen = ko.observable(false);
self.selectedrelated = ko.observableArray([]);
/*Control Events*/
self.addProductOption = function () {
var newoption = ko.mapping.fromJS({
title: "Please select the number of years license",
productoptionrows: ko.observableArray([{
id: "15",
title: "25-100",
related: []
}, {
id: "16",
title: "101-250",
related: []
}, {
id: "17",
title: "251-500",
related: []
}])
}, mappingOptions);
self.productoptions.push(newoption);
};
self.copyProductOption = function (productoption) {
var copy = ko.mapping.fromJS(ko.mapping.toJS(productoption), mappingOptions);
self.productoptions.push(copy);
};
self.removeProductOption = function (productoption) {
self.productoptions.remove(productoption);
};
self.addProductOptionRow = function (productoption) {
var newrow = ko.mapping.fromJS({
id: "15",
title: "25-100",
related: []
}, mappingOptionsPR);
productoption.productoptionrows.push(newrow);
};
self.removeProductOptionRow = function (productoption) {
$.each(self.productoptions(), function () {
this.productoptionrows.remove(productoption)
})
};
self.open = function (productoption, event) {
self.selectedrelated(productoption.related);
self.isOpen(true);
};
self.close = function () {
self.isOpen(false);
}
self.associaterelated = function (record, elem) {
//console.log(ko.mapping.toJS(record));
}
};
ko.applyBindings(new ProductOptionModel(initialData), document.getElementById('page-wrapper'));
});
<link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdn.rawgit.com/gvas/knockout-jqueryui/075b303a/dist/knockout-jqueryui.min.js"></script>
<div id="page-wrapper">
<div>
<button title="Add Option" type="button" data-bind='click: $root.addProductOption'>Add Option</button>
</div>
<div id="options" data-bind="foreach: productoptions">
<div style="padding:10px;margin:20px;background-color:whitesmoke">
<table class="option-header" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Group Title <span class="required">*</span></th>
<th>
<button title="Copy" type="button" class="" style="" data-bind='click: $root.copyProductOption'>Copy</button>
<button title="Delete Option" type="button" data-bind='click: $root.removeProductOption'>Delete Option</button>
</th>
</tr>
</thead>
<tbody>
<tr style="height:36px;">
<td>
<input type="text" data-bind='value: title'>
</td>
<td>
</td>
</tr>
</tbody>
</table>
<div>
<table class="option-header-rows" cellpadding="0" cellspacing="0">
<thead>
<tr class="headings">
<th>Id</th>
<th colspan="2" class="type-title">Title <span class="required">*</span></th>
<th>Children</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: productoptionrows">
<tr>
<td align="center">
<input required type="text" style="width:40px" data-bind='value: id'>
</td>
<td colspan="2">
<input type="text" value="25-100" data-bind='value: title'>
</td>
<td>
<input type="text" data-bind='value: relatedcsv' name="isdefault">Lookup</td>
<td>
<button title="Delete Row" type="button" data-bind='click: $root.removeProductOptionRow'>Delete Row</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">
<button title="Add New Row" type="button" data-bind='click: $root.addProductOptionRow'>Add New Row</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- popup -->
<div data-bind="dialog: { isOpen: isOpen,title:'Select relations', modal:true }">
<div data-bind="foreach: $root.productoptions">
<div data-bind='text: title'></div>
<div data-bind="foreach: productoptionrows">
<div>
<input type="checkbox" data-bind="value: id, checked: $root.selectedrelated" style="width:auto" />
ID <span data-bind='text: id'></span> - <span data-bind='text: title'></span>
</div>
</div>
</div>
</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>
I've tried to distill the many-to-many issue down to a simple example. Here, persons and things are mapped to each other. To track the mapping, each person has a list of things. For each possible thing, there is a checkbox with that value. Its checked binding is bound to the thingList for the current person.
Binding to an array makes the checkbox insert or remove its value to/from the array.
function person(name) {
return {
name,
thingList: ko.observableArray()
};
}
const vm = {
people: ko.observableArray(['Abby', 'Bill', 'Charlie'].map((n) => person(n))),
things: ko.observableArray(['apple', 'bullet', 'cup', 'doll', 'egg'])
};
ko.applyBindings(vm);
.checklist {
display: inline-block;
}
.no-bullets {
list-style-type: none;
}
.no-bullets li {
display: inline;
padding-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach:people">
<div>Name: <span data-bind="text:name"></span>
<div class="checklist" data-bind="foreach:$parent.things">
<label><input type="checkbox" data-bind="value:$data, checked:$parent.thingList"><span data-bind="text:$data"></span></label>
</div>
<ul class="no-bullets" data-bind="foreach:thingList"><li data-bind="text:$data"></li></ul>
</div>
</div>

Duplicated form after click button add

Anybody help me, I have these working code currently:
HTML:
<body ng-controller="ExampleCtrl">
<label>Category:</label>
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label><br/><br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
</td>
</tr>
</tbody>
</table>
JS
function ExampleCtrl($scope){
$scope.categories = [
{
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
];
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{
type: "string",
attribute: "material"
},
{
type: "string",
attribute: "soles"
},
{
type: "string",
attribute: "size"
}
]
}
}
];
// add menu item
$scope.addItem = function(list, item){
list.push(angular.copy(item));
item = {};
};
// remove menu item
$scope.removeItem = function(list, index){
list.splice(index ,1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
For a demo :
Seet Demo
My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. How to fix my problem?
item should be defined as {} before pushing in list array.
If you do not want to send any model data through view then there is no point of sending attr argument to controller
Try this:
// Code goes here
function ExampleCtrl($scope) {
$scope.categories = [{
name: 'custom',
templateAttribute: [{
attribute: 'material'
}, {
attribute: 'soles'
}, {
attribute: 'size'
}]
}];
$scope.products = [{
name: 'custom',
category: {
name: 'custom',
templateAttribute: [{
type: "string",
attribute: "material"
}, {
type: "string",
attribute: "soles"
}, {
type: "string",
attribute: "size"
}]
}
}];
// add menu item
$scope.addItem = function(list, item) {
item = {};
list.push(angular.copy(item));
};
// remove menu item
$scope.removeItem = function(list, index) {
list.splice(index, 1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<h3>How to fix this</h3>
<p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
<label>Category:
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label>
<br/>
<br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codepen demo

How to use submit button to search the record in a table?

Here is my index.html page
------index.html-------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6"
src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="PeopleCtrl"> <input type="text"
name="search1" >
<input type="submit" ng-model="search1" value="search"
ng-click="checkAll"> <table border="1" ng-init="ageToShow=(people|
underTwenty: 20).length >= 1">
<tr name="search1" > <th>Id</th> <th>Name</th> <th ng-show="ageToShow"
ng-if="!ageToShow">Age</th> </tr> <tr ng-repeat="person in
people|filter: search" ng-show="person.age>20" >
<td><span>{{person.id}}</span> </td> <td><span>{{person.name}}</span>
</td> <td ng-show="!ageToShow"><span>{{person.age}}</span> </td> </tr>
</table>
</div> </body> </html>
What i need is to use submit button to search the record .... And here is my script.js file...
--------script.js--------
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$filter) {
$scope.people = ([{
id: 1,
name: "Peter",
age: 22 }, {
id: 2,
name: "David",
age: 12 }, {
id: 3,
name: "Anil",
age: 32 }, {
id: 4,
name: "Chean",
age: 22 }, {
id: 5,
name: "Niladri",
age: 18 }
]);
$scope.people3 = $scope.people;
$scope.$watch('search1', function(val)
{
$scope.people = $filter('filter')($scope.people3, val);
});
}); myApp.filter('underTwenty', function() {
return function(values, limit) {
var returnValue = [];
angular.forEach(values, function(val, ind) {
if (val.age < limit)
returnValue.push(val);
}); return returnValue; }; });
And here goes my coding in plunker: http://plnkr.co/edit/?p=preview
Only for filtering if you are planning to do submit the form, then I'll suggest you to don't prefer form submit.
Form getting the same requirement done I'd create one dummy field for search text-box & then I'd assign that would to search model which we using for filter on click of search ng-click="search = search1"
HTML
<input type="text" name="search1" ng-model="search1"/>
<input type="button" value="search" ng-click="search = search1">
<table border="1" ng-init="ageToShow=(people| underTwenty: 20).length >= 1">
<tr name="search1">
<th>Id</th>
<th>Name</th>
<th ng-show="ageToShow" ng-if="!ageToShow">Age</th>
</tr>
<tr ng-repeat="person in people|filter: search" ng-show="person.age>20">
<td><span>{{person.id}}</span>
</td>
<td><span>{{person.name}}</span>
</td>
<td ng-show="!ageToShow"><span>{{person.age}}</span>
</td>
</tr>
</table>
& Do remove the watch from search1 variable. So the filtering will not occur on change of search1
Working Plunkr

Adding a select list to knockout VM not populating selects value

I am trying to learn a little bit of knockout.js so I am running through the examples on the website in particular the contact example. (Knockout Contacts Editor)
I am trying to extend this example by adding a select list with a property of 'ContactType'
ContactType is a basic list containing 2 objects.
I have created a fork of the example and extended it slightly My Extended Example fiddle
var initialData = {
"names": [{
firstName: "Danny",
lastName: "LaRusso",
contactTypeId: 1,
phones: [{
type: "Mobile",
number: "(555) 121-2121"
}, {
type: "Home",
number: "(555) 123-4567"
}]
}, {
firstName: "Sensei",
lastName: "Miyagi",
contactTypeId: 2,
phones: [{
type: "Mobile",
number: "(555) 444-2222"
}, {
type: "Home",
number: "(555) 999-1212"
}]
}],
"contactTypes": [{
"id": 1,
"type": "Family"
}, {
"id": 2,
"type": "Friend"
}]
}
var ContactsModel = function (contacts) {
var self = this;
self.contactTypes = ko.observableArray(ko.utils.arrayMap(contacts.contactTypes,
function (contactType) {
return {
id: contactType.id,
type: contactType.type
};
}));
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts.names, function (contact) {
return {
firstName: contact.firstName,
lastName: contact.lastName,
phones: ko.observableArray(contact.phones),
contactTypeId: ko.observable(contact.contactTypeId)
};
}));
self.addContact = function () {
self.contacts.push({
firstName: "",
lastName: "",
phones: ko.observableArray(),
contactTypeId: ko.observable()
});
};
self.removeContact = function (contact) {
self.contacts.remove(contact);
};
self.addPhone = function (contact) {
contact.phones.push({
type: "",
number: ""
});
};
self.removePhone = function (phone) {
$.each(self.contacts(), function () {
this.phones.remove(phone)
})
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new ContactsModel(initialData));
HTML
<div class='liveExample'>
<h2>Contacts</h2>
<div id='contactsList'>
<table class='contactsEditor'>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Contact Type</th>
<th>Phone numbers</th>
</tr>
<tbody data-bind="foreach: contacts">
<tr>
<td>
<input data-bind='value: firstName' />
<div><a href='#' data-bind='click: $root.removeContact'>Delete</a>
</div>
</td>
<td>
<input data-bind='value: lastName' />
</td>
<td>
<select class="form-control" data-bind="options: $root.contactTypes,
optionsText: 'type',
optionsValue:'id',
value:'contactTypeId',
optionsCaption: 'Please Select...'"></select>
</td>
<td>
<table>
<tbody data-bind="foreach: phones">
<tr>
<td>
<input data-bind='value: type' />
</td>
<td>
<input data-bind='value: number' />
</td>
<td><a href='#' data-bind='click: $root.removePhone'>Delete</a>
</td>
</tr>
</tbody>
</table> <a href='#' data-bind='click: $root.addPhone'>Add number</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
<button data-bind='click: addContact'>Add a contact</button>
<button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>
</div>
I have 2 problems which I am not sure what I am doing wrong with.
When the page is loaded the select list is not displaying the correct value. Instead its just displaying the 'Please Select' value
When I try save the record the selected value from the select list is not saved.
Am I doing something obviously wrong here?
The issue was you were setting the value binding incorrectly. Instead of value: 'contactTypeId' when it should just be value: contactTypeId without the quotations.
<select class="form-control" data-bind="options: $root.contactTypes,
optionsText: 'type',
optionsValue: 'id',
value: contactTypeId,
optionsCaption: 'Please Select...'">
</select>
Also for the save function it's better to use use knockouts ko.toJSON instead of JSON.stringify(ko.toJS
self.save = function () {
self.lastSavedJson(ko.toJSON(self.contacts), null, 2);
};

Differentiating current textbox value from old one and showing in Angular JS

My code is like this
<body>
<div>
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.quantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems" >
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>
</div>
(function () {
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.palletElement = [{
name: 'Pallet 1',
Data: [{
name: 'item 1',
itemId: '284307',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - frame',
quantity: '31',
handlingUnit: 'CTN',
weight: '613.04',
class: '',
lenght: '102',
width: '42',
height: '61',
flag: 'P'
}, {
name: 'item 2',
itemId: '284308',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - fork',
quantity: '22',
handlingUnit: 'CTN',
weight: '242.99',
class: '',
lenght: '75',
width: '34',
height: '18',
flag: 'P'
}]
}]
$scope.newPalletItem = function (palletElement, $event) {
counter++;
$scope.palletElement.push(palletElement);
}
});
}());
When some one changes the value in last column textbox and press submit button I want to calculate [preloded value in textbox - (minus) current value in that text box ] and show it in next row. So far I have managed to duplicate the entire data completely to next row. but have no Idea in how to achieve rest. Can any one pint out a solution.
Fiddle
More details from Fiddle: as you can see current value is first text box is 31 if some one changes it to 10 when I duplicate the row to bottom I want that new textbox value to be shown as 21 (which is 31-10).
Please see here: http://jsfiddle.net/8r8cxcup/
newPalletImte:
$scope.newPalletItem = function (palletElement, $event) {
var npalletElement = {};
angular.copy(palletElement, npalletElement);
counter++;
angular.forEach(npalletElement.Data, function (row) {
if (row.quantity != row.newquantity) {
row.quantity = row.quantity - row.newquantity;
}
});
$scope.palletElement.push(npalletElement);
};
});
HTML:
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = data.quantity">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.newquantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems">
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>

Categories

Resources