我是 typescript 和 angular 的新手。我已经使用 typescript 和 angular js 实现了一个模块。我需要在其中创建一个动态表，它将获取演示文稿的类型，并相应地附加到我的 View ，就像我以前在 C# 中所做的那样。我在下面给出了我的 C# 代码:
private void ShowCustomFields()
{
Customer.CustomerController control = new Customer.CustomerController();
DataTable fields = control.GetCustomFields();
TableRow row = new TableRow();
Int16 count = 0;
foreach (DataRow dr in fields.Rows)
{
count++;
string id = dr["Id"].ToString();
string name = dr["Name"].ToString();
string type = dr["Type"].ToString();
string val = "";
//Determine if the user can view/edit this custom field
bool canEdit = false;
if (Permissions.PermissionController.HasPermission(this.UserInfo.Username, "Custom Fields - Customer",
dr["Name"].ToString(),
Permissions.PermissionLevels.Edit))
{
canEdit = true;
}
TableCell cellId = new TableCell();
cellId.Visible = false;
cellId.EnableViewState = true;
cellId.Text = id;
TableCell cellName = new TableCell();
cellName.Text = name + ": ";
cellName.Width = 150;
cellName.EnableViewState = true;
TableCell cellControl = new TableCell();
cellControl.EnableViewState = true;
TextBox tb = new TextBox();
if (!canEdit)
{
tb.Enabled = false;
}
tb.TabIndex = (Int16)(1000 + count);
RangeValidator r = new RangeValidator();
switch (type)
{
case "Text":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
break;
case "Integer":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Integer;
r.MinimumValue = Int32.MinValue.ToString();
r.MaximumValue = Int32.MaxValue.ToString();
r.ErrorMessage = "Invalid Integer";
cellControl.Controls.Add(r);
break;
case "Decimal":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Double;
r.MinimumValue = "-1000000000000";
r.MaximumValue = "1000000000000";
r.ErrorMessage = "Invalid Decimal";
cellControl.Controls.Add(r);
break;
case "Date":
tb.Text = val;
tb.ID = "CustomField" + id;
tb.EnableViewState = true;
tb.CssClass = "NormalTextBox";
cellControl.Controls.Add(tb);
r.ControlToValidate = tb.UniqueID;
r.Type = ValidationDataType.Date;
r.MinimumValue = "1/1/1900";
r.MaximumValue = "12/31/3000";
r.ErrorMessage = "Invalid Date";
cellControl.Controls.Add(r);
break;
case "TrueFalse":
CheckBox cb = new CheckBox();
if (val.ToUpper().Equals("TRUE"))
{
cb.Checked = true;
}
cb.EnableViewState = true;
cb.CssClass = "NormalTextBox";
cb.TabIndex = (Int16)(1000 + count);
cellControl.Controls.Add(cb);
break;
case "DropdownList":
DropDownList ddl = new DropDownList();
Vbos.Maintenance.MaintenanceController mcon = new Vbos.Maintenance.MaintenanceController();
ddl.DataSource = mcon.GetTypeItems("CF_" + name);
ddl.DataTextField = "Description";
ddl.DataValueField = "ShortDescription";
ddl.DataBind();
ListItem li = new ListItem();
li.Text = "--Select--";
li.Value = "-1";
li.Selected = true;
ddl.Items.Insert(0, li);
if (ddl.Items.FindByValue(val) != null)
{
ddl.SelectedIndex = -1;
ddl.Items.FindByValue(val).Selected = true;
}
cellControl.Controls.Add(ddl);
break;
}
row.Cells.Add(cellId);
row.Cells.Add(cellName);
row.Cells.Add(cellControl);
row.EnableViewState = true;
tableCustomFields.Rows.Add(row);
//if( count%2 == 0 )
//{
row = new TableRow();
//}
tableCustomFields.EnableViewState = true;
}
}
如您所见，我可以根据类型获取数据。我如何使用 Angular Js 实现相同的功能，并且想知道如何将这些值也与我的 ng-model 绑定(bind)。
最佳答案
对于 Angular，您可以像@Dean Ward(Dean 说的怎么样？)建议的那样使用像 uiGrid 这样的模块。或者你可以自己做。
C# 代码的主体是命令式的，可以以某种方式转换为 TypeScript。但是不推荐这样做。许多实际的数据驱动的表构建可以使用现有的 Angular 指令以声明的方式完成。
代码的核心是根据单元格的类型来显示单元格。这可以作为一个简单的包装器指令来实现，它将自身替换为适当类型的指令。
对于每种单元格类型，您都可以创建一个自定义指令:整数单元格、小数单元格、下拉单元格、 bool 单元格……每个单元格都将处理单元格的显示方式以及控件呈现的内容。
然后您就可以对每一列和每一行使用 ng-repeat，并让 wrapper 指令将自身替换为自定义类型指令。
这种方法的另一个优点是您可以更好地分离关注点，遵循开放/封闭原则，并且您的组件只会做一件事。
如果 wrapper 指令使用约定来显示类型指令，您可以在将来添加新类型而无需打开任何现有组件。
对于刚接触 Angular 的人来说，这是一项繁重的工作。我会接受@Dean Ward 的建议。 angular 有很多可编辑的网格解决方案。如果 uiGrid 不适合您的需要，请查看其他现有组件。
更新几个例子
您最好的选择仍然是使用现有的网格组件，例如 uiGrid。如果你想自己写这个，我不推荐——这将是一种方法。
function cellInteger(): ng.IDirective {
return {
scope: {data: '='},
controller: 'CellIntegerController',
controllerAs: 'vm',
bindToController,
templateUrl: 'path/to/integer.html'
}
}
gridMobule.directive('cellInteger', cellInteger);
export class CellIntegerController {
public data: CellDataType;
constructor() {}
save(value: number) {
this.data.value = number;
}
}
gridModule.controller('CellIntegerController', CellIntegerController);
在你看来，你会有这样的东西:
<input
type="number"
class="cell-integer"
ng-model="vm.data.value"
ng-blur="save(vm.data.value)"
</
关于angularjs - Angular Js+ typescript : How to create a Dynamic table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31456158/