9

我是 typescript 和 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 绑定。

4

1 回答 1

5

使用 Angular，您可以使用像 @Dean Ward（Dean 怎么样？）建议的 uiGrid 之类的模块。或者你可以自己做。

您的 C# 代码的内容是必要的，并且可以以某种方式转换为 TypeScript。不过不建议这样做。许多实际的数据驱动表构建可以使用现有的 Angular 指令以声明的方式完成。

代码的核心根据其类型显示单元格。这可以实现为一个简单的包装器指令，它将用适当类型的指令替换自身。

对于每种单元格类型，您可以创建一个自定义指令：整数单元格、十进制单元格、下拉单元格、布尔单元格...每个都将处理单元格的显示方式以及控件的呈现方式。

然后，您将能够对每一列和每一行使用 ng-repeat，并让 wrapper 指令将其自身替换为自定义类型指令。

这种方法的另一个优点是您可以更好地分离关注点，遵循开放/封闭原则，并且您的组件只会做一件事。

如果 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)"
</
于 2015-07-19T10:04:44.763 回答