Angular Js + TypeScript: Wie erstellt man eine dynamische Tabelle

Question

Ich bin neu in Typoskript und eckig.Ich habe ein Modul mit Typescript und eckigen js implementiert. In dem ich brauche eine dynamische Tabelle zu erstellen, die die Art der Präsentation holen werden und entsprechend meine Ansicht anhänge wie zuvor i in C# .My C# -Code getan habe, habe ich unten angegeben:

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; 
     } 
    } 

Wie Sie mich sehen können kann Daten auf der Basis von type abrufen. Wie kann ich das gleiche mit Angular Js implementieren und möchte wissen, wie kann ich diese Werte mit meinem ng-Modell zu binden.

Answer 1

Mit Angular könnte man ein Modul wie uiGrid wie @Dean Ward (wie geht es Dean?) Vorschlagen. Oder du könntest es selbst tun.

Das Fleisch Ihres C# -Codes ist zwingend erforderlich und könnte in gewisser Weise in TypeScript übersetzt werden. Dies wäre jedoch nicht zu empfehlen. Ein großer Teil des tatsächlichen datengesteuerten Tabellenaufbaus kann auf deklarative Weise unter Verwendung vorhandener Angular-Direktiven erfolgen.

Das Herz Ihres Codes zeigt die Zelle basierend auf ihrem Typ an. Dies könnte als einfache Wrapper-Direktive implementiert werden, die sich selbst durch eine Direktive für den entsprechenden Typ ersetzt.

Für jeden Zelltyp können Sie eine benutzerdefinierte Direktive erstellen: Integer-Zelle, Dezimal-Zelle, Dropdown-Zelle, Boolean-Zelle ... Jeder würde damit umgehen, wie die Zelle angezeigt wird und wie das Steuerelement gerendert wird.

Dann könnten Sie ng-repeat für jede Spalte und Zeile verwenden und die Wrapper-Direktive durch eine benutzerdefinierte Typ-Direktive ersetzen lassen.

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass Sie Probleme besser trennen können, dem Prinzip "offen/geschlossen" folgen und Ihre Komponenten nur eines tun.

Wenn die Wrapper-Direktive eine Konvention zum Anzeigen der Typ-Direktiven verwendet, können Sie in der Zukunft neue Typen hinzufügen, ohne dass vorhandene Komponenten geöffnet werden müssen.

Dies ist eine Menge Arbeit für jemanden neu in Angular. Ich würde mit dem Vorschlag von Dean Ward gehen. Es gibt viele bearbeitbare Rasterlösungen für Winkel. Wenn uiGrid nicht Ihren Anforderungen entspricht, sehen Sie sich andere vorhandene Komponenten an.

UPDATE Einige Beispiele

Ihre beste Wette ist nach wie vor eine bestehende Grid-Komponente, wie uiGrid zu verwenden. Wenn du das selbst schreiben willst, was ich nicht empfehle - dann wäre das eine Möglichkeit.

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); 

Ihrer Ansicht nach für diese würden Sie so etwas wie haben:

<input 
    type="number" 
    class="cell-integer" 
    ng-model="vm.data.value" 
    ng-blur="save(vm.data.value)" 
</