我是打字稿和角色的新手。我使用typescript和angular js实现了一个模块。我需要在其中创建一个动态表，它将获取演示文稿的类型并相应地附加到我以前在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绑定。
答案 0 :(得分：5)
使用Angular你可以使用像@Dean Ward这样的uiGrid模块（Dean会怎么样？）。或者你可以自己做。
C＃代码的内容是必不可少的，可以某种方式转换为TypeScript。但不建议这样做。许多实际的数据驱动表构建可以使用现有的Angular指令以声明方式完成。
代码的核心是根据类型显示单元格。这可以作为一个简单的包装器指令来实现，该指令将用适当类型的指令替换它自己。
对于每个单元格类型，您可以创建自定义指令：integer-cell，decimal-cell，dropdown-cell，boolean-cell ...每个将处理单元格的显示方式以及控件的呈现方式。
然后，您将能够对每个列和行使用ng-repeat，并让包装器指令将自身替换为自定义类型指令。
这种方法的另一个优点是你可以更好地分离关注点，遵循开放/封闭原则，你的组件只会做一件事。
如果wrapper指令使用约定来显示类型指令，则可以在将来添加新类型，而无需打开任何现有组件。
对于Angular新手来说，这是一项很多工作。我会选择@Dean Ward的建议。角度有很多可编辑的网格解决方案。如果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)"
</