Angular Js + TypeScript:如何创建动态表

Question

我是打字稿和angular的新手.我使用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绑定.

Answer 1

使用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)"
</