MVC Angular JS 和 WCF REST 服务用于主/详细信息 HTML 网格
5.00/5 (6投票s)
MVC、AngularJS 和 WCF REST 服务用于主/详细信息 HTML 网格
引言
您还可以查看我之前关于使用 MVC 和 WCF REST 服务进行 AngularJs 的文章。
- MVC AngularJS 和 WCF REST 服务用于心智阅读器测验
- 使用 MVC 和 WCF REST 构建 Angular JS 过滤、排序和动画
- 使用 MVC 和 WCF REST 实现 Angular JS 购物车
在本文中，我们将使用 Angular JS 和 WCF 创建一个主详细信息网格。在本文中，我们将看到
- 如何创建 WCF REST 服务并从数据库检索数据
- 如何将 Angular JS 包安装到我们的 MVC 应用程序
- 如何创建我们的 Angular JS 应用程序来创建我们自己的主详细信息网格
- 如何使用 Angular JS 中的 WCS 服务并将主详细信息和详细信息的数据绑定到我们的 MVC 视图
注意：先决条件 -> Visual Studio 2013（如果您没有 Visual Studio 2013，可以从 Microsoft 网站此处下载）。
在这里，我们可以看到一些基本和参考链接
- Windows Communication Foundation (WCF)：WCF 是一个用于构建面向服务应用程序的框架。
- 面向服务应用程序：使用协议，服务可以在网络上共享和使用。
例如，让我们考虑现在我们正在做一个项目，我们需要创建一些通用的数据库函数，这些函数需要被多个项目使用，并且这些项目位于不同的地方并通过互联网连接。
在这种情况下，我们可以创建一个 WCF 服务，并将所有通用的数据库函数写在我们的 WCF 服务类中。我们可以将 WCF 部署在 IIS 中，并在我们的应用程序中使用 URL 来执行 DB 函数。在代码部分，让我们看看如何创建 WCF REST 服务并在我们的 Angular JS 应用程序中使用它。
如果您有兴趣阅读更多关于 WCF 的详细信息，请访问此链接。
Angular JS
我们可能知道 MVVM（模型、视图、视图模型）和 MVC（模型、视图和控制器）是什么。Angular JS 是一个纯粹基于 HTML、CSS 和 JavaScript 的 JavaScript 框架。
与 MVC 和 MVVM 模式类似，Angular JS 采用 MVW（模型视图随便）模式。
在我们的示例中，我使用了模型、视图和服务。在代码部分，让我们看看如何在我们的 MVC 应用程序中安装和创建 Angular JS。
如果您有兴趣阅读更多关于 Angular JS 的详细信息，请访问此链接。
Using the Code
创建数据库和表
我们将创建一个订单主表和订单详细表，用于主/详细信息网格数据绑定。
以下是用于创建数据库、表和示例文本插入查询的脚本。
在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2008 R2。
-- create DataBase
Create Database OrderManagement
-- Create OrderMasters Table
CREATE TABLE [dbo].[OrderMasters](
[Order_No] [varchar](20) NOT NULL,
[Table_ID] [varchar](20) NOT NULL,
[Description] [varchar](200) NOT NULL,
[Order_DATE] [datetime] NOT NULL,
[Waiter_Name] [varchar](20) NOT NULL
CONSTRAINT [PK_OrderMasters] PRIMARY KEY CLUSTERED
(
[Order_No] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, _
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
-- Insert OrderMasters sample data
INSERT INTO [OrderMasters]
([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('ORD_001','T1','Order for Table T1',GETDATE(),'SHANU' )
INSERT INTO [OrderMasters]
([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('ORD_002','T2','Order for Table T2',GETDATE(),'Afraz' )
INSERT INTO [OrderMasters]
([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('ORD_003','T3','Order for Table T3',GETDATE(),'Afreen')
CREATE TABLE [dbo].[OrderDetails](
[Order_Detail_No] [varchar](20) NOT NULL,
[Order_No] [varchar](20) CONSTRAINT fk_OrderMasters FOREIGN KEY REFERENCES _
OrderMasters(Order_No),
[Item_Name] [varchar](20) NOT NULL,
[Notes] [varchar](200) NOT NULL,
[QTY] INT NOT NULL,
[Price] INT NOT NULL
CONSTRAINT [PK_OrderDetails] PRIMARY KEY CLUSTERED
(
[Order_Detail_No] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
-- Now let’s insert the 3 items for the above Order No 'Ord_001'.
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_001','ORD_001','Ice Cream','Need very Cold',2 ,160)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_002','ORD_001','Coffee','Hot and more Suger',1 ,80)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_003','ORD_001','Burger','Spicy',3 ,140)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_004','ORD_002','Pizza','More Chees and Large',1 ,350)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_005','ORD_002','Cola','Need very Cold',3 ,50)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_006','ORD_003','IDLY','Hot',3 ,40)
INSERT INTO [OrderDetails]
([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
('OR_DT_007','ORD_003','Thosa','Hot',3 ,50)
-- To Select and test Order Master and Details
Select * FROM OrderMasters
Select * From OrderDetails
2）创建 WCF REST 服务
打开 Visual Studio 2013 -> 选择 **文件** - **新建** - **项目** – 选择 **WCF 服务应用程序** -> 选择您的项目路径并命名您的 WCF 服务，然后单击 **确定**。
创建 WCF 服务后，我们将在解决方案资源管理器中看到“IService.CS”和“Service1.svc”，如下所示。
IService.CS - > 在“IService.CS”中，我们默认可以看到三个协定。
[ServiceContract]- > 描述了服务可用的方法或任何操作。服务协定是一个接口，并且可以使用 Operation Contract 属性在服务接口内声明方法。[OperationContract]-> 类似于 Web 服务的[WEBMETHOD]。[DataContract]- > 描述了客户端和服务之间的数据交换。[ServiceContract]
以下代码将自动为所有 IService.CS 文件创建。我们可以在此处更改和编写自己的代码。
public interface IService1
{
[OperationContract]
string GetData(int value);
[OperationContract]
CompositeType GetDataUsingDataContract(CompositeType composite);
// TODO: Add your service operations here
}
// Use a data contract as illustrated in the sample below to add composite types
// to service operations.
[DataContract]
public class CompositeType
{
bool boolValue = true;
string stringValue = "Hello ";
[DataMember]
public bool BoolValue
{
get { return boolValue; }
set { boolValue = value; }
}
[DataMember]
public string StringValue
{
get { return stringValue; }
set { stringValue = value; }
}
}
数据合同
在我们的示例中，我们需要同时获取订单主信息和订单详细信息，所以我创建了两个数据协定，“OrderMasterDataContract”和“OrderDetailDataContract”。
在这里，我们可以看到我们已经将所有表列名声明为数据成员。
public class OrderDataContract
{
[DataContract]
public class OrderMasterDataContract
{
[DataMember]
public string Order_No { get; set; }
[DataMember]
public string Table_ID { get; set; }
[DataMember]
public string Description { get; set; }
[DataMember]
public string Order_DATE { get; set; }
[DataMember]
public string Waiter_Name { get; set; }
}
[DataContract]
public class OrderDetailDataContract
{
[DataMember]
public string Order_Detail_No { get; set; }
[DataMember]
public string Order_No { get; set; }
[DataMember]
public string Item_Name { get; set; }
[DataMember]
public string Notes { get; set; }
[DataMember]
public string QTY { get; set; }
[DataMember]
public string Price { get; set; }
}
}
服务合同
在“Operation Contract”中，我们可以看到“WebInvoke”和“WebGet”，它们用于在 REST 服务中从数据库检索数据。
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
在这里，我们可以看到在请求和响应格式中，我都使用了 Json 格式。
JSON - > JavaScript Object Notation 是一种轻量级数据交换格式。
UriTemplate - > 是我们的方法名称，在这里，我们的方法返回类型是 List。
在这里，我声明了三个方法：“GetOrderMaster”、“SearchOrderMaster”和“OrderDetails”。“GetOrderMaster”方法用于获取订单主记录。“OrderDetails”方法中，Order_No 参数用于按订单号过滤获取订单详细信息。
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetOrderMaster/")]
List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/SearchOrderMaster/{Order_No}")]
OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No);
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/OrderDetails/{Order_No}")]
List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
}
Iservice.Cs -> 完整源代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Shanu_WCFDBService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu
// to change the interface name "IService1" in both code and config file together.
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetOrderMaster/")]
List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();
[OperationContract]
[WebGet(RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/SearchOrderMaster/{Order_No}")]
OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No);
[OperationContract]
[WebInvoke(Method = "GET",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/OrderDetails/{Order_No}")]
List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
}
public class OrderDataContract
{
[DataContract]
public class OrderMasterDataContract
{
[DataMember]
public string Order_No { get; set; }
[DataMember]
public string Table_ID { get; set; }
[DataMember]
public string Description { get; set; }
[DataMember]
public string Order_DATE { get; set; }
[DataMember]
public string Waiter_Name { get; set; }
}
[DataContract]
public class OrderDetailDataContract
{
[DataMember]
public string Order_Detail_No { get; set; }
[DataMember]
public string Order_No { get; set; }
[DataMember]
public string Item_Name { get; set; }
[DataMember]
public string Notes { get; set; }
[DataMember]
public string QTY { get; set; }
[DataMember]
public string Price { get; set; }
}
}
}
使用 ADO.NET 实体数据模型添加数据库
右键单击您的 WCF 项目，选择 **添加新项** -> 选择 **ADO.NET 实体数据模型**，然后单击 **添加**。
选择 **EF Designer 从数据库**，然后单击 **下一步**。
;
单击 新建连接。
在这里，我们可以选择我们的数据库服务器名称，并输入您的 DB 服务器 SQL Server 身份验证用户名和密码。我们已经创建了名为“OrderManagement”的数据库，所以我们可以选择数据库并单击 **确定**。
单击 **下一步**，然后选择我们需要使用的表。在我们的示例中，我们需要使用“OrderMasters”和“orderDetails”。选择这两个表，然后单击 **完成**。
在这里，我们可以看到现在我们已经创建了 OrderManagementModel。
Service1.SVC
“Service.SVC.CS”实现了 IService 接口，并重写和定义了所有 Operation Contract 方法。
例如，这里我们可以看到我在 Service1 类中实现了 IService1。创建了我们实体模型的对象，并在 GetOrderMaster 中使用 LINQ 查询，我从 OrderMasters 表中选择数据，并将结果添加到列表中。
public class Service1 : IService1
{
OrderManagementEntities OME;
public Service1()
{
OME = new OrderManagementEntities();
}
public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()
{
var query = (from a in OME.OrderMasters
select a).Distinct();
List<OrderDataContract.OrderMasterDataContract> orderMasterList =
new List<OrderDataContract.OrderMasterDataContract>();
query.ToList().ForEach(rec =>
{
orderMasterList.Add(new OrderDataContract.OrderMasterDataContract
{
Order_No = Convert.ToString(rec.Order_No),
Table_ID = rec.Table_ID,
Description = rec.Description,
Order_DATE = Convert.ToString(rec.Order_DATE),
Waiter_Name = rec.Waiter_Name
});
});
return orderMasterList;
}
}
“Service.SVC.CS” - 完整源代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using Shanu_WCFDBService.Model;
namespace Shanu_WCFDBService
{
public class Service1 : IService1
{
OrderManagementEntities OME;
public Service1()
{
OME = new OrderManagementEntities();
}
public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()
{
var query = (from a in OME.OrderMasters
select a).Distinct();
List<OrderDataContract.OrderMasterDataContract> orderMasterList =
new List<OrderDataContract.OrderMasterDataContract>();
query.ToList().ForEach(rec =>
{
orderMasterList.Add(new OrderDataContract.OrderMasterDataContract
{
Order_No = Convert.ToString(rec.Order_No),
Table_ID = rec.Table_ID,
Description = rec.Description,
Order_DATE = Convert.ToString(rec.Order_DATE),
Waiter_Name = rec.Waiter_Name
});
});
return orderMasterList;
}
public OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No)
{
OrderDataContract.OrderMasterDataContract OrderMaster=
new OrderDataContract.OrderMasterDataContract();
try
{
var query = (from a in OME.OrderMasters
where a.Order_No.Equals(Order_No)
select a).Distinct().FirstOrDefault();
OrderMaster.Order_No = Convert.ToString(query.Order_No);
OrderMaster.Table_ID = query.Table_ID;
OrderMaster.Description = query.Description;
OrderMaster.Order_DATE = Convert.ToString(query.Order_DATE);
OrderMaster.Waiter_Name = query.Waiter_Name;
}
catch (Exception ex)
{
throw new FaultException<string>
(ex.Message);
}
return OrderMaster;
}
public List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No)
{
var query = (from a in OME.OrderDetails
where a.Order_No.Equals(Order_No)
select a).Distinct();
List<OrderDataContract.OrderDetailDataContract> OrderDetailList =
new List<OrderDataContract.OrderDetailDataContract>();
query.ToList().ForEach(rec =>
{
OrderDetailList.Add(new OrderDataContract.OrderDetailDataContract
{
Order_Detail_No = Convert.ToString(rec.Order_Detail_No),
Order_No = Convert.ToString(rec.Order_No),
Item_Name = rec.Item_Name,
Notes = rec.Notes,
QTY = Convert.ToString(rec.QTY),
Price = Convert.ToString(rec.Price)
});
});
return OrderDetailList;
}
}
}
Web.Config
在 WCF 项目的“Web.Config”中。
- 将
<add binding="basicHttpsBinding" scheme="https" />更改为<add binding="webHttpBinding" scheme="http" />。 - 将
</behaviors>替换为
<endpointBehaviors>
<behavior>
<webHttp helpEnabled="True"/>
</behavior>
</endpointBehaviors>
</behaviors>
运行 WCF 服务
既然我们已经创建了 WCF REST 服务，让我们运行并测试我们的服务。
在我们的服务 URL 中，我们可以添加我们的方法名称，并看到来自数据库的 JSON 结果数据。
好了，我们完成了 WCF 部分，现在是时候创建我们的 MVC Angular JS 应用程序了。
我们可以向现有项目添加新项目，并创建一个新的 **MVC Web 应用程序**，如下所示。
右键单击您的解决方案，然后单击 **添加新项目** -> 输入您的项目名称，然后单击 **确定**。
选择 MVC，然后单击 确定。
现在我们已经创建了 MVC 应用程序，是时候添加我们的 WCF 服务并向我们的解决方案安装 Angular JS 包了。
添加 WCF 服务：右键单击 **MVC 解决方案**，然后单击 **添加** -> 单击 **服务引用**。
输入您的 WCF URL，然后单击 **GO**。这里，我的 WCF URL 是 https://:2505/Service1.svc。
添加您的名字，然后单击 确定。
现在我们已成功将 WCF 服务添加到我们的 MVC 应用程序中。
安装 Angular JS 包的步骤
右键单击您的 MVC 项目，然后单击 -> **管理 NuGet 程序包**。
选择 Online，然后搜索 Angular JS。选择 AngularJs，然后单击 安装。
现在我们已经将 AngularJS 包安装到了我们的 MVC 项目中。现在让我们创建我们的 Angular Js。
- Modules.js
- Controllers.js
- Services.js
创建 AngularJS 脚本文件的步骤
右键单击 Script 文件夹，创建您自己的文件夹来创建我们的 Angular Js 模型/控制器和服务 JavaScript。在您的script 文件夹中，添加三个 JavaScript 文件，并命名为Modules.js、Controllers.js 和Services.js，如下所示。
Modules.js：在这里，我们添加 Angular.js JavaScript 的引用，并创建一个名为“RESTClientModule”的 Angular 模块。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", []);
})();
Services.js：在这里，我们添加 Angular.js JavaScript 和我们的 Module.js 的引用。
在这里，我们为我们的服务命名，并在 controllers.js 中使用此名称。这里，对于 Angular 服务，我将其命名为“AngularJs_WCFService”。您可以自己命名，但要注意在 Controllers.js 中更改名称。这里，我们可以在方法中看到我已经传递了我们 Web 服务的 URL。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
app.service("AngularJs_WCFService", function ($http) {
//Get Order Master Records
this.getOrdermaster = function () {
return $http.get("https://:2505/Service1.svc/GetOrderMaster");
};
//Search Order Master Records
this.getSearchOrder = function (OrderNO) {
return $http.get("https://:2505/Service1.svc/SearchOrderMaster/" + OrderNO);
}
//Search Order Details Records
this.getOrderDetail = function (OrderNO) {
return $http.get("https://:2505/Service1.svc/OrderDetails/" + OrderNO);
}
});
Controllers.js：这里，我们添加 Angular.js JavaScript 以及我们的 Module.js 和 Services.js 的引用。与 Services 类似。对于控制器，我将其命名为“AngularJs_WCFController”。
首先，我获取当前日期并使用 $scope.date 存储日期。
我创建了一个名为 GetOrderMasters() 的方法，并使用 Services 模块，获取 Order Master 表的结果，并将结果绑定到“$scope.OrderMastersDisp = pl.data”。同样，我们创建所有其他方法。
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
/// <reference path="Services.js" />
app.controller("AngularJs_WCFController", function ($scope, $window, AngularJs_WCFService) {
$scope.date = new Date();
GetOrderMasters();
//To Get All Records
function GetOrderMasters() {
var promiseGet = AngularJs_WCFService.getOrdermaster();
promiseGet.then(function (pl) {
$scope.OrderMastersDisp = pl.data
},
function (errorPl) {
});
}
Hidetables()
function Hidetables() {
$scope.isRowHidden = false;
}
$scope.get = function (Order) {
if (Order == null) {
return;
}
if (Order.isRowHidden == true) {
Order.isRowHidden = false;
var promiseGet = AngularJs_WCFService.getOrderDetail(Order.Order_No);
promiseGet.then(function (pl) {
$scope.OrderDetailDisp = pl.data
},
function (errorPl) {
});
}
else {
Order.isRowHidden = true;
}
}
});
现在，我们已经创建了 Angular Js 模块/控制器和服务。接下来是什么？
创建 MVC Controller 和 View 以显示我们的结果。
添加 Controller
右键单击 **Controllers** -> **添加 Controller** -> 选择 **MVC 5 Controller** – Empty -> 单击 **添加**。
更改 Controller 名称，这里我将其命名为“OrderManagementController”，然后单击 **确定**。
添加视图：右键单击 **Controller Index**，然后单击 **添加视图**。
将视图命名为“Index”。
在视图中设计您的页面，并引用 angular.Js、Modules.js、Services.js 和 Controllers.js。
在 Angular JS 中，我们使用 {{ }} 来绑定或显示数据。
在这里，我们可以看到我首先创建了一个表格，然后是这个表格。
首先，在表格中，我使用了 data-ng-controller="AngularJs_WCFController"，这里我们可以看到 data-ng-controller 将用于将控制器的日期绑定到我们的 HTML 表。
使用 <tbody data-ng-repeat="detail in OrderDetailDisp">，我们可以获取所有记录，并使用 <td><span>{{order.Order_No}}</span></td> 将所有数据绑定到表格内部。同样，我们为内部表格创建了。当用户单击 Details 按钮时，我将显示 Order Details 表。
<html data-ng-app="RESTClientModule">
@{
ViewBag.Title = "SHANU AngularJs / WCF and Master Detail Grid";
}
<body>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table width="99%" style=" border-bottom:3px solid #3273d5;">
<tr>
<td width=" 250">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}} .
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Order Master / Detail Grid using Angular JS and WCF in MVC :)</h3>
</td>
<td align="right">
<div ng-controller="AngularJs_WCFController">
Today Date is :
{{date | date:'yyyy-MM-dd'}}
</div>
</td>
</tr>
</table>
<img src="~/Images/blank.gif" alt="" width="1" height="10" />
<table id="tblContainer" data-ng-controller="AngularJs_WCFController"
style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style=" background-color:#ECF3F4; border: solid 2px #3273d5;
padding: 5px;width: 99%;table-layout:fixed;">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;">
<th width="60"></th>
<th>Order No</th>
<th>Table ID</th>
<th>Notes</th>
<th>Order DATE</th>
<th>Waiter Name</th>
<th></th>
</tr>
<tbody data-ng-repeat="order in OrderMastersDisp">
<tr>
<td width="60">
<input type="button" id="Detail"
value="Detail" data-ng-click="get(order)" />
</td>
<td><span>{{order.Order_No}}</span></td>
<td><span>{{order.Table_ID}}</span></td>
<td><span>{{order.Description}}</span></td>
<td><span>{{order.Order_DATE}}</span></td>
<td><span>{{order.Waiter_Name}}</span></td>
<td></td>
</tr>
<tr id={{order.Order_No}} ng-hide="order.isRowHidden"
ng-init="get(order)">
<td> </td>
<td colspan="6">
<table style=" background-color:#ECF3F4;
border: solid 2px #3273d5; padding: 5px;
width: 99%;table-layout:fixed;">
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;">
<th>Order No</th>
<th>Order Detail No</th>
<th>Item Name</th>
<th>Comments</th>
<th>QTY</th>
<th>Price</th>
</tr>
<tbody data-ng-repeat="detail in OrderDetailDisp">
<tr>
<td><span>{{detail.Order_No}}</span></td>
<td><span>{{detail.Order_Detail_No}}</span></td>
<td><span>{{detail.Item_Name}}</span></td>
<td><span>{{detail.Notes}}</span></td>
<td><span>{{detail.QTY}}</span></td>
<td><span>{{detail.Price}}</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body></html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ShanuAngularScript/Modules.js"></script>
<script src="~/Scripts/ShanuAngularScript/Services.js"></script>
<script src="~/Scripts/ShanuAngularScript/Controllers.js"></script>
运行您的程序
这里，我们可以看到当运行程序时，首先，我在表格中显示 Order Master 记录。
当用户单击 Detail 按钮时，我将在下一行显示订单的详细信息。
支持的浏览器：Chrome 和 Firefox
历史
- 2015 年 5 月 28 日：版本 1.0