[AngularJS] How can i set rowspan value dynamically to work with angularjs on date filed ?

[Ahmed Amen]

*Hi*

*i try here to view customers data on my view throw API i have "ID, Name,
MyDate", but i need it viewed on table grouped by same month like:*

<Loading Image...>
*but i don't know how to set it works i try many times as:*

rowspan="{{cus.MyDate.length+1}}"

*but nothing - my html code is:*

<div ng-app="jqanim" ng-controller="ttController">
<table class="table table-bordered">
<tr>
<th>CustomerID</th>
<th>CustomerName</th>
<th>CustomerMonth</th>
</tr>
<tr ng:repeat="cust in customers">
<td>
{{cust.ID}}
</td>
<td>{{cust.Name}}</td>
<td rowspan="{{cus.MyDate.length+1}}"> @* here i need to use
rowspan on month value on MyDate ?? *@
{{cust.MyDate | date: "MMMM"}}
</td>
</tr>
</table>
</div>

*js code:*

(function () {
var app = angular.module('jqanim', []);

app.controller('ttController', function ($scope, $http) {

$http.get("/api/Test").success(function (data) {
$scope.customers = data;
});

});
})();

*api controller code:*

private static List<Test> listOfOrders;


public TestController()
{
if (listOfOrders == null)
{
listOfOrders = new List<Test>
{
new Test { ID = 1, Name = "Customer1" , MyDate = new
DateTime(2015,01,01)},

new Test { ID = 2, Name = "Customer2" , MyDate = new
DateTime(2015,01,01)},

new Test { ID = 3, Name = "Customer3" , MyDate = new
DateTime(2015,02,05)},

new Test { ID = 4, Name = "Customer4" , MyDate = new
DateTime(2015,01,05)},

new Test { ID = 5, Name = "Customer5" , MyDate = new
DateTime(2015,02,05)},

new Test { ID = 6, Name = "Customer6" , MyDate = new
DateTime(2015,02,05)},

new Test { ID = 7, Name = "Customer7" , MyDate = new
DateTime(2015,02,05)},

new Test { ID = 8, Name = "Customer8" , MyDate = new
DateTime(2015,03,05)},

new Test { ID = 9, Name = "Customer9" , MyDate = new
DateTime(2015,04,05)}
};
}
}

public IEnumerable<Test> Get()
{
return listOfOrders.OrderBy(i => i.MyDate);
}

*so please how can i make it works ?*

[Sander Elias]

Hi Ahmed,

Don't try to solve this in the template. While it is possible, you will
offload a lot of complexity into your template that does not belong there.
do something like this in your controller. (For your reference, if you have
an $http call in your controller, that is a sure sign you need a
service/factory, as a rule of thumb, don't do $http in a controller)

$http.get("/api/Test").success(function (data) {
var dataByMonth = [];
data.forEach(itemToMonth);
$scope.customers = dataByMonth;

function itemToMonth(item) {
var month = item.MyDate.getMonth;
dataByMonth[month] = dataByMonth[month] || [];
dataByMonth[month].push(item);
}
});

Then you can simply nest the repeat, and be done with it.
When you have difficulties doing this, set up a plunk
<http://plnkr.co/edit/tpl:bSBatno6Z85VMCtxF4KK>, and I will take a look for
you.

Regards
Sander

[Ahmed Amen]

*Thanks a lot Sander*

*so sorry for not understanding you as it should be - i'm new with angular
- i have add sample project
here: http://plnkr.co/edit/JERX3iqg1mF7M0TBpLH2?p=preview
<http://plnkr.co/edit/JERX3iqg1mF7M0TBpLH2?p=preview>*

*hope you take a look and help me (i have create an array has some data but
i can't view it with angular )*

Post by Sander Elias
Hi Ahmed,
Don't try to solve this in the template. While it is possible, you will
offload a lot of complexity into your template that does not belong there.
do something like this in your controller. (For your reference, if you
have an $http call in your controller, that is a sure sign you need a
service/factory, as a rule of thumb, don't do $http in a controller)
$http.get("/api/Test").success(function (data) {
var dataByMonth = [];
data.forEach(itemToMonth);
$scope.customers = dataByMonth;
function itemToMonth(item) {
var month = item.MyDate.getMonth;
dataByMonth[month] = dataByMonth[month] || [];
dataByMonth[month].push(item);
}
});
Then you can simply nest the repeat, and be done with it.
When you have difficulties doing this, set up a plunk
<http://plnkr.co/edit/tpl:bSBatno6Z85VMCtxF4KK>, and I will take a look
for you.
Regards
Sander

[Robert STAICU]

I have a little plunker on what i think Sander want you to do with data
from $http.

http://plnkr.co/edit/7MV7Y50vqia4qJcpvnNi?p=preview

Now i need to leave so i can't help you any further...

If i'm corect about what i think Sander want to mean, you now should just
template...

When i'm gonna come back i'll assist you further.

Good bye

[Ahmed Amen]

*Thanks a lot - i still waiting Sander to see what we can do ....*

Post by Ahmed Amen
*Hi*
*i try here to view customers data on my view throw API i have "ID, Name,
MyDate", but i need it viewed on table grouped by same month like:*
<https://lh3.googleusercontent.com/-5qUf6uDwlj0/VXIs638BChI/AAAAAAAABZk/W65G-uWVpp4/s1600/Untitled.png>
*but i don't know how to set it works i try many times as:*
rowspan="{{cus.MyDate.length+1}}"
*but nothing - my html code is:*
<div ng-app="jqanim" ng-controller="ttController">
<table class="table table-bordered">
<tr>
<th>CustomerID</th>
<th>CustomerName</th>
<th>CustomerMonth</th>
</tr>
<tr ng:repeat="cust in customers">
<td>
{{cust.ID}}
</td>
<td>{{cust.Name}}</td>
{{cust.MyDate | date: "MMMM"}}
</td>
</tr>
</table>
</div>
*js code:*
(function () {
var app = angular.module('jqanim', []);
app.controller('ttController', function ($scope, $http) {
$http.get("/api/Test").success(function (data) {
$scope.customers = data;
});
});
})();
*api controller code:*
private static List<Test> listOfOrders;
public TestController()
{
if (listOfOrders == null)
{
listOfOrders = new List<Test>
{
new Test { ID = 1, Name = "Customer1" , MyDate = new
DateTime(2015,01,01)},
new Test { ID = 2, Name = "Customer2" , MyDate = new
DateTime(2015,01,01)},
new Test { ID = 3, Name = "Customer3" , MyDate = new
DateTime(2015,02,05)},
new Test { ID = 4, Name = "Customer4" , MyDate = new
DateTime(2015,01,05)},
new Test { ID = 5, Name = "Customer5" , MyDate = new
DateTime(2015,02,05)},
new Test { ID = 6, Name = "Customer6" , MyDate = new
DateTime(2015,02,05)},
new Test { ID = 7, Name = "Customer7" , MyDate = new
DateTime(2015,02,05)},
new Test { ID = 8, Name = "Customer8" , MyDate = new
DateTime(2015,03,05)},
new Test { ID = 9, Name = "Customer9" , MyDate = new
DateTime(2015,04,05)}
};
}
}
public IEnumerable<Test> Get()
{
return listOfOrders.OrderBy(i => i.MyDate);
}
*so please how can i make it works ?*

[Sander Elias]

Hi Ahmed,

here you go: link to plunk <http://plnkr.co/edit/FxfcjTODukg1O4Jtc0cQ?>
If you have question on why and how, feel free to ask :)

Regards
Sander

[Ahmed Amen]

*Thanks so much it's works great now :)*

*but please why and how :) ??!!*

Post by Sander Elias
Hi Ahmed,
here you go: link to plunk <http://plnkr.co/edit/FxfcjTODukg1O4Jtc0cQ?>
If you have question on why and how, feel free to ask :)
Regards
Sander

[Sander Elias]

Hi Ahmed,

Please be more specific, on what you want to know. I don't have time to
explain everything I did in there. I assume you can get your grasp on most
of it by yourself. Play around with it a bit. :)

[Ahmed Amen]

*Thanks for inform me*

*please can you tell me what is the mean of that:*

ng-if="$first"

*as i understand in js code you loop throw MyDate filed to get it but i
can't understand this part:*

dataByMonth[month] = dataByMonth[month] || [];
dataByMonth[month].push(item);

*thanks a lot and have a great day ..... :)*

Post by Sander Elias
Hi Ahmed,
Please be more specific, on what you want to know. I don't have time to
explain everything I did in there. I assume you can get your grasp on most
of it by yourself. Play around with it a bit. :)

[Robert STAICU]

ng-if="$first" means that only if is the first object from ng-repeat="cust
in month" it will show month. It's angular staff. He does that to ensure
that only first row will show month. You can either try $last in place of
$first and Jan Febr etc will show last from their group. Also if you remove
that ng-if all records will have months.

dataByMonth[month] = dataByMonth[month] || [];
dataByMonth[month].push(item);
Inhere he just initialize dataByMonth to be an empty array if doesn't exist.

dataByMonth[month] = (dataByMonth) ? dataByMonth[month] : [];

dataByMonth[month].push(item); // He just push records into months. In
january he push 3 records {id: 1, name: 'Senior'}, {id:2, 'Senior'}, {id:3,
'Adult'}

And in html he do 2 repeat.
1. For month to get all months with their records.
2. Get all records from current month.

Hope this helps. If any other questions i will help you. Sander i hope
you'll not get angry.

A nice day to both of you

[Sander Elias]

Hi Robert,

Your explanation is sound. But i don't understand one thing, why do you
think I might get angry?

Regards
Sander

[Ahmed Amen]

*Thanks Both of you ....*

Post by Sander Elias
Hi Robert,
Your explanation is sound. But i don't understand one thing, why do you
think I might get angry?
Regards
Sander

[Robert STAICU]

Cause you helped him:D

Also this should be an update to your strategy Ahmed. If you have 3 records
from Jan 2015 and 2 from Jan 2016 you will have 5 records from Jan. I think
you'll need to distinguise year also.
http://plnkr.co/edit/bObFZarT4eKqHxJrusAq?p=preview

I only added one filter that will order your records. You can
change orderObjectBy: 'MyDate': true from true to false to order them. Have
a nice day

[Ahmed Amen]

*Thanks a lot Robert for your important note*

*but please why you use filter here and sorry can you explain filter code
please ?*

*i try it without filter and it works as i need:*


* item.MyDate = new Date(item.MyDate) var
month = item.MyDate.getMonth(); var year =
item.MyDate.getFullYear(); dataByMonth[year + '-' + month] =
dataByMonth[year + '-' + month] || []; dataByMonth[year +
'-' + month].push(item);may be because i have set order by in my C#
controller as:*



* public IEnumerable<Test> Get() { return
listOfOrders.OrderBy(i => i.MyDate).ThenBy(i => i.ID); }*

Post by Robert STAICU
Cause you helped him:D
Also this should be an update to your strategy Ahmed. If you have 3
records from Jan 2015 and 2 from Jan 2016 you will have 5 records from Jan.
I think you'll need to distinguise year also.
http://plnkr.co/edit/bObFZarT4eKqHxJrusAq?p=preview
I only added one filter that will order your records. You can
change orderObjectBy: 'MyDate': true from true to false to order them. Have
a nice day

[Robert STAICU]

*Ok so i made a filter cause you can include it in main module. Think using
5 modules "MainModule", "TableModule", "UserModule", "LoginModule",
"ExampleModule".*
*You can use this filter in any of 5 modules i exampled to you. You can
have a "BaseModule" that can include filter "orderObjectBy" and all of your
modules is gonna inherit that. My module basically transform
$scope.customersByMonth from object to array and then sort it.
function(items, filter, reverse) is gonna be:*
*1. $scope.customersByMonth[month] = array of object of month *
*2. month[0].MyDate = date of that month(a[0][filter] && b[0][filter])
//filter being "MyDate"*
*3. if reverse = false or true*

*I know you can order your data from server, but in this case your data
will be ordered by the front-end. You can do both of them or just one of
them.*

*I suggest doing both of them if you want to make a directive with this and
public it. If you use just for your own scope you can do the server stuff.*

*If any rows isn't clear just ask. I'll be glad to answer. *

*Have a good night*

[Robert STAICU]

*Ok so i made a filter cause you can include it in BaseModule. Think using
5 modules "MenuModule", "TableModule", "UserModule", "LoginModule",
"ExampleModule".*
*You can use this filter in any of 5 modules i exampled to you. You can
have a "BaseModule" that can include filter "orderObjectBy" and all of your
modules are gonna inherit that. *

*My filter basically transform $scope.customersByMonth from object to
array and then sort it. "function(items, filter, reverse)" params are
gonna be:*
*1. $scope.customersByMonth[month] = array of object of month
(params.items)*
*2. 'MyDate' = date of that month(a[0][filter] && b[0][filter]) //filter
being "MyDate" (params.filter)*
*3. if reverse = false or true
(params.reverse)*

*You can console.log() them to see what is going on.*

*I know you can order your data from server, but in this case your data
will be ordered by the front-end. You can do both of them or just one of
them.*

*I suggest doing both of them if you want to make a directive with this and
public it. If you use just for your own scope you can do the server stuff.*

*If any rows isn't clear just ask. I'll be glad to answer. *

*Have a nice day*

[Ahmed Amen]

*Thanks Robert *

*it works fine now but please i have an problem with other Angular Project
and hope that you can help me with that, i have create an invoice with
angular and pass data throw API Controller - i store data in list to let me
save it on database when i need, but when i open new invoice from my PC and
add item's on it before i save it to database i open another invoice from
other PC and when it's open i got the item's from invoice in my pc on it
too - i don't know how to set it to open with empty array in each PC to be
works as it should be ?*

*Angular Code:*

(function () {
var app = angular.module('jqanim', []);

app.controller('InvoiceController', function ($scope, $http) {
$scope.tax = 0.00;
$scope.PercentageDiscount = 0.00;
$scope.MoneyDiscount = 0.00;
$scope.Total = 0.00;

$scope.save = function () {
$http.post("/api/customerService/Post",
$scope.item).success(function (data) {
$scope.orders.push(data);

// Clear AutoComplete Text
$("#Products").data("kendoAutoComplete").value("");

if (window.event.keyCode == 13) {
$("#ProductID").focus();
}

$('#ProductID').prop('readonly', false);
});
};

$scope.saveInvoice = function () {
$http.post("/api/customerService/SaveInvoice", $scope.invoice)
.success(function (data) {
// Clear AutoComplete Text
$("#Customers").data("kendoAutoComplete").value("");

$scope.invoice = [];
$scope.orders = [];

$scope.tax = 0.00;
$scope.PercentageDiscount = 0.00;
$scope.MoneyDiscount = 0.00;

alertify.set('notifier', 'position', 'top-left');
alertify.success('تم حف؞ الفاتورة', 3);
})
.error(function (data) {
alertify.set('notifier', 'position', 'top-right');
alertify.error('يوجد خطأ', 2);
return;
});
};

$scope.remove = function (id, index) {
$http.delete("/api/customerService?id=" + id).success(function
(data) {
$scope.orders.splice(index, 1);
});
};

$http.get("/api/CustomerService/getDetails").success(function
(data) {
$scope.orders = data;
});

$scope.keypress = function (id) {
if (window.event.keyCode == 13) {

$http.get("/api/CustomerService/GetProduct?id=" +
id).success(function (data) {

angular.forEach(data, function (item) {

$("#Products").val(item.ProductName).trigger('change');


$("#SellPrice").val(item.sell_price).trigger('change');

$("#Stock").val(item.stock).trigger('change');

$("#Quantity").focus();
});

});
}
};
});
})();


*my view code:*

<form method="post" ng-submit="save(); item={}">
<table class="table table-striped table-bordered" dir="rtl">
<tr>
<th class="text-center">كود الصنف</th>
<th class="text-center">إسم الصنف</th>
<th class="text-center">الكمية</th>
<th class="text-center">السعر</th>
<th class="text-center">الرصيد</th>
<th class="text-center">الإجمالى</th>
<th></th>
</tr>
<tr>
<td style="vertical-align:middle;">
@*<input type="number" step="any" class="k-textbox
trv-parameter-editor-number" id="ProductID" ng-model="item.ProductID"
ng-keypress="keypress(item.ProductID,$index)">*@
<input id="ProductID" type="text" placeholder="حدد
الكود" class="text-center form-control" style="width:100px;
font-weight:bold" />
</td>
<td align="center" style="vertical-align:middle;">
<div>
@(Html.Kendo()
.AutoComplete()
.Name("Products")
.DataTextField("ProductName")
.Events(events =>
events.Select("ProductSelect"))
.MinLength(1)
.HtmlAttributes(new { style = "width:450px;
font-weight:bold", ng_model = "item.ProductName" })
.Placeholder("إكتؚ جزء من إسم الصنف")
.Filter("contains")
.Delay(1)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.ServerPaging(true)
.Type("aspnetmvc-ajax") //Set this
type if you want to use DataSourceRequest and ToDataSourceResult instances
.Transport(transport =>
{

transport.Read("Virtualization_Read", "Home");
})
.Schema(schema =>
{
schema.Data("Data") //define
the
[data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data)
option
.Total("Total"); //define
the
[total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total)
option
});
})
.Virtual(v =>
v.ItemHeight(26).ValueMapper("valueMapper"))
)

</div>
</td>
<td align="center" style="vertical-align:middle;">
<input ng-readonly="item.ProductID == '' ||
item.ProductID == null" id="Quantity" name="Quantity" class="text-center
form-control" ng-model="item.Quantity" value="1" size="4" ng:required
ng:validate="integer" placeholder="حدد الكمية" style="width:100px;
font-weight:bold">
</td>
<td align="center" style="vertical-align:middle;">
<input ng-readonly="true" id="SellPrice"
class="text-center form-control" ng-model="item.SellPrice" value="0.00"
ng:required ng:validate="number" size="6" style="width:100px;
font-weight:bold">
</td>
<td align="center" style="vertical-align:middle;">
<input ng-readonly="true" id="Stock" class="text-center
form-control" ng-model="item.Stock" value="0.00" ng:required
ng:validate="number" size="6" style="width:100px; font-weight:bold">
</td>

<td class="text-center" style="vertical-align:middle;
width:100px; font-weight:bold;">
{{item.SellPrice * item.Quantity | currency}}
@Html.TextBox("Total_Item", null, new { ng_model =
"item.Total_Item", @style = "display:none;" })
</td>

<td align="center" style="vertical-align:middle;">
<input ng-disabled="item.Quantity > item.Stock ||
item.Quantity == 0 || item.Quantity == null || item.SellPrice == null"
type="submit" name="submitbtn" value="إضافة" class="btn btn-primary"
style="font-weight:bold;" />
</td>
</tr>
<tr>
<td colspan="7" class="text-center" style="color:red;
font-weight:bold;">
<div ng-show="item.Quantity > item.Stock">رصيد الصنف لا
يكفى</div>
<div ng-show="item.Quantity == 0">غير مسموح ؚكمية أقل
من 1</div>
</td>
</tr>
</table>
</form>
<br />
@* Details *@
<table class="table table-striped table-bordered" align="center"
dir="rtl" ng-show="(orders).length">
<tr>
<th class="text-center" style="width:100px;">كود الصنف</th>
<th class="text-center">إسم الصنف</th>
<th class="text-center" style="width:150px;">الكمية</th>
<th class="text-center" style="width:150px;">السعر</th>
<th class="text-center" style="width:150px;">الإجمالى</th>
<th style="width:150px;"></th>
</tr>
<tr ng-repeat="ord in orders">
<td align="center" style="vertical-align:middle;
font-weight:bold;">
{{ord.ProductID}}
</td>
<td align="center" style="vertical-align:middle;
font-weight:bold;">
{{ord.ProductName}}
</td>
<td align="center" style="vertical-align:middle;
font-weight:bold;">
{{ ord.Quantity}}
</td>
<td align="center" style="vertical-align:middle;
font-weight:bold;">
{{ord.SellPrice}}
</td>
<td class="text-center" style="vertical-align:middle;
font-weight:bold;">
{{ord.SellPrice * ord.Quantity | currency}}
</td>
<td align="center" style="vertical-align:middle;">
<input type="submit" name="submitbtn" value="x" class="btn
btn-danger" ng-click="remove(ord.ProductID,$index)"
style="font-weight:bold;" />
</td>
</tr>

</table>

*API Controller Code:*

readonly Model1 db = new Model1();

private static List<Order_Details_VM> listOfOrders;

private static List<Product> listOfProducts;

int statusCode = 0;

public CustomerServiceController()
{
listOfProducts = null;

if (listOfProducts == null)
{
listOfProducts = new List<Product>();

foreach (var pro in db.Products)
{
Product p = new Product();

p.ProductID = pro.ProductID;
p.ProductName = pro.ProductName;
p.sell_price = pro.sell_price;
p.stock = pro.stock;

listOfProducts.Add(p);
}
}

if (listOfOrders == null)
{
listOfOrders = new List<Order_Details_VM>();
}
}

public IHttpActionResult GetDetails()
{
return Ok(listOfOrders);
}

public IHttpActionResult GetProduct(int id)
{
var selectedProduct = listOfProducts.Where(i => i.ProductID ==
id).ToList();
return Ok(selectedProduct);
}

public IHttpActionResult Post(Order_Details_VM newOrderDetails)
{
if (newOrderDetails != null)
{
listOfOrders.Add(newOrderDetails);

return Ok(newOrderDetails);
}
return null;
}

public IHttpActionResult SaveInvoice(Order_VM newOrderMaster)
{
// save on header table to get invoice id
if (newOrderMaster != null)
{
var order = new Order();

order.CustomerID = newOrderMaster.CustomerID;
order.OrderDate = newOrderMaster.OrderDate;
order.Freight = (decimal)newOrderMaster.Total;
//order.type = "ؚيع";
db.Orders.Add(order);
db.SaveChanges();

newOrderMaster.OrderID = order.OrderID;
}

// loop throw items list to check Stock & add to database with
invoice no
foreach (var item in listOfOrders)
{
item.OrderID = newOrderMaster.OrderID;

// ckeck Stock in online database not in the list
var model = db.Products.Find(item.ProductID);

if (model.stock >= item.Quantity)
{
model.stock = model.stock - item.Quantity;
db.Entry(model).State = EntityState.Modified;
statusCode = 200;
}
else
{
statusCode = 404;
}

if (statusCode == 200)
{
// save to DB
var orderdetails = new Order_Detail();

orderdetails.OrderID = item.OrderID;
orderdetails.ProductID = item.ProductID;
orderdetails.UnitPrice = (decimal)item.SellPrice;
orderdetails.Quantity = item.Quantity;
orderdetails.Quantity_buy = item.Quantity;
orderdetails.Total = item.Total_Item;

db.Order_Details.Add(orderdetails);
db.SaveChanges();
}
else
{
var x = item.ProductName;
}
}

listOfOrders.Clear();

return Ok();
}

public Order_Details_VM Delete(int id)
{
if (id > 0)
{
// here by productis
var selectedCustomer = listOfOrders.Find(p => p.ProductID
== id);
if (selectedCustomer != null)
{
listOfOrders.Remove(selectedCustomer);
return selectedCustomer;
}

} return new Order_Details_VM();
}


*sorry for long code but hope that you can help me please ?*

*Thanks a lot ....*

Post by Robert STAICU
*Ok so i made a filter cause you can include it in BaseModule. Think using
5 modules "MenuModule", "TableModule", "UserModule", "LoginModule",
"ExampleModule".*
*You can use this filter in any of 5 modules i exampled to you. You can
have a "BaseModule" that can include filter "orderObjectBy" and all of your
modules are gonna inherit that. *
*My filter basically transform $scope.customersByMonth from object to
array and then sort it. "function(items, filter, reverse)" params are
gonna be:*
*1. $scope.customersByMonth[month] = array of object of month
(params.items)*
*2. 'MyDate' = date of that month(a[0][filter] && b[0][filter]) //filter
being "MyDate" (params.filter)*
*3. if reverse = false or true
(params.reverse)*
*You can console.log() them to see what is going on.*
*I know you can order your data from server, but in this case your data
will be ordered by the front-end. You can do both of them or just one of
them.*
*I suggest doing both of them if you want to make a directive with this
and public it. If you use just for your own scope you can do the server
stuff.*
*If any rows isn't clear just ask. I'll be glad to answer. *
*Have a nice day*

[Robert STAICU]

Hello again. I think you should've done another post for this.

I looked over your code. I pasted it into my notepad++ and deleted
saveInvoice cause is never called, remove() cause i don't think it's
relevant, keypress never called(I think cause it was commented that input).

What i really think is wrong is your backend. I really haven't found any
mistake in angular stuff. So let's clear something.

You have a form that comunicate with server trough kendo(i don't know
nothing about kendo just that "is two way data binding"). You create a new
invoice that is stored live to your server and updated live too. And if you
don't save it and go on another Pc you can see that invoice.
If that is the case i think you should rethink this.

If i press create i would create a new invoice with an id of 1(let's say
one cause it doesn't exist for now). I just play with that.
If i press again create i would create a new invoice with an id of 2(cause
1 already exist) And i'll be sure that every time i create a new invoice on
my backend i'll do it empty.

So your url will look like this(back-end and front-end)
'blablabla/invoice/1' and 'blablabla/invoice/2' Your server will look for 1
or 2 and get that specific data. This is called restfull so i think that's
all you wanna do in this case.

This is what i understood from your code. If i'm mistake corect me.

Have a nice day...and btw when you will get details your url will be "/api/CustomerService/invoice/1/getDetails"
and "/api/CustomerService/invoice/2/getDetails"

[Ahmed Amen]

*Thanks Robert*

*sorry for bad understanding you i have create new post for that on
: https://groups.google.com/forum/#!topic/angular/M_DtyUKAWJY
<https://groups.google.com/forum/#!topic/angular/M_DtyUKAWJY>*

*i have added there full codes hope you reply there with more details or
example to let me understand it *

*Note: i try other solution by set listOfOrders = null; in my api
Controller Constractor and pass **listOfOrders in other list to loop throw
it when need to save data in database (that works)*

*but i need to know other way to learn how to do it with angular (set this
section empty when i open new invoice in any pc ) i think problem is here*



* <tr ng-repeat="ord in orders"> <td align="center"
style="vertical-align:middle; font-weight:bold;">
{{ord.ProductID}} </td> <td align="center"
style="vertical-align:middle; font-weight:bold;">
{{ord.ProductName}} </td> <td align="center"
style="vertical-align:middle; font-weight:bold;"> {{
ord.Quantity}} </td> <td align="center"
style="vertical-align:middle; font-weight:bold;">
{{ord.SellPrice}} </td> <td class="text-center"
style="vertical-align:middle; font-weight:bold;">
{{ord.SellPrice * ord.Quantity | currency}} </td> <td
align="center" style="vertical-align:middle;"> <input
type="submit" name="submitbtn" value="x" class="btn btn-danger"
ng-click="remove(ord.ProductID,$index)" style="font-weight:bold;" />
</td> </tr>Thanks a lot .... *

Post by Robert STAICU
Hello again. I think you should've done another post for this.
I looked over your code. I pasted it into my notepad++ and deleted
saveInvoice cause is never called, remove() cause i don't think it's
relevant, keypress never called(I think cause it was commented that input).
What i really think is wrong is your backend. I really haven't found any
mistake in angular stuff. So let's clear something.
You have a form that comunicate with server trough kendo(i don't know
nothing about kendo just that "is two way data binding"). You create a new
invoice that is stored live to your server and updated live too. And if you
don't save it and go on another Pc you can see that invoice.
If that is the case i think you should rethink this.
If i press create i would create a new invoice with an id of 1(let's say
one cause it doesn't exist for now). I just play with that.
If i press again create i would create a new invoice with an id of 2(cause
1 already exist) And i'll be sure that every time i create a new invoice on
my backend i'll do it empty.
So your url will look like this(back-end and front-end)
'blablabla/invoice/1' and 'blablabla/invoice/2' Your server will look for 1
or 2 and get that specific data. This is called restfull so i think that's
all you wanna do in this case.
This is what i understood from your code. If i'm mistake corect me.
Have a nice day...and btw when you will get details your url will be
"/api/CustomerService/invoice/1/getDetails" and "/api/
CustomerService/invoice/2/getDetails"