Angular Js + TypeScript: Làm thế nào để tạo ra một bảng năng động

Question

Tôi mới vào loại và angular.I đã thực hiện một mô-đun bằng cách sử dụng các loại và js góc. Trong đó tôi cần phải tạo ra một bảng năng động mà sẽ lấy kiểu trình bày và theo đó gắn liền với các quan điểm của tôi như trước đây tôi đã làm trong C# .My C# code tôi đã đưa ra dưới đây:

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

Như bạn có thể thấy tôi có thể lấy dữ liệu trên cơ sở loại. Làm thế nào tôi có thể thực hiện tương tự bằng cách sử dụng Js góc và muốn biết làm thế nào tôi có thể ràng buộc các giá trị này với ng-mô hình của tôi quá.

Answer 1

Với góc cạnh, bạn có thể sử dụng một mô-đun như uiGrid như @Dean Ward (như thế nào nó đi Dean?) Cho thấy. Hoặc bạn có thể tự mình làm.

Thịt mã C# của bạn là bắt buộc và có thể được dịch sang TypeScript theo một cách nào đó. Điều này sẽ không được đề nghị mặc dù. Phần lớn việc xây dựng bảng dữ liệu thực tế có thể được thực hiện theo cách khai báo bằng cách sử dụng các chỉ thị Góc hiện có.

Tâm của mã của bạn hiển thị ô dựa trên loại của nó. Điều này có thể được thực hiện như một chỉ thị bao bọc đơn giản sẽ thay thế chính nó bằng một chỉ thị cho loại thích hợp.

Đối với mỗi loại ô, bạn có thể tạo chỉ thị tùy chỉnh: số nguyên, ô thập phân, ô thả xuống, ô boolean ... Mỗi ô sẽ xử lý cách hiển thị ô và điều khiển được hiển thị.

Sau đó, bạn sẽ có thể sử dụng ng-lặp lại cho mỗi cột và hàng và để cho chỉ thị trình bao bọc thay thế chính nó bằng chỉ thị loại tùy chỉnh.

Một ưu điểm khác của phương pháp này là bạn có sự phân tách mối quan tâm tốt hơn, tuân theo nguyên tắc mở/đóng và các thành phần của bạn sẽ chỉ làm một việc.

Nếu chỉ thị trình bao bọc sử dụng quy ước để hiển thị các chỉ thị loại, bạn có thể thêm các loại mới trong tương lai mà không cần mở bất kỳ thành phần hiện có nào.

Đây là rất nhiều công việc cho người mới đến Góc. Tôi sẽ đi với gợi ý của @Dean Ward. Có rất nhiều giải pháp lưới có thể chỉnh sửa cho góc. Nếu uiGrid không phù hợp với nhu cầu của bạn, hãy xem các thành phần hiện có khác.

CẬP NHẬT Một vài ví dụ

Tốt nhất vẫn là sử dụng một thành phần lưới điện hiện có, như uiGrid. Nếu bạn muốn tự mình viết, điều mà tôi không khuyên bạn nên - đây sẽ là một cách để thực hiện nó.

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

Theo quan điểm của mình đối với điều này, bạn sẽ có một cái gì đó như:

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