AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

Microsoft.AspNetCore.Mvc を使用します。
Microsoft.Extensions.Logging を使用します。
Newtonsoft.Json を使用します。
システムの使用;
System.Collections.Generic を使用します。
System.Diagnostics を使用します。
System.Linq を使用します。
System.Threading.Tasks を使用します。
WebApplication1.Models を使用します。
 
名前空間 WebApplication1.Controllers
{
    パブリッククラス HomeController: コントローラ
    {
        パブリック IActionResult Index(文字列オブジェクトタイプ)
        {
            ViewBag.objecttype = オブジェクトタイプ;
            View() を返します。
        }
        [HttpPost]
        パブリック JsonResult GetItem(文字列オブジェクトタイプ)
        {
            if (オブジェクトタイプ == "学生")
            {
                学生アイテム = 新しい学生
                {
                    いいえ = "S001",
                    名前 = "張三"、
                    性別 = "男性"、
                };
                リスト<列> columns = 新しいリスト<列>();
                columns.Add(新しい列 { columnname = "no", displaynname="学生番号" });
                columns.Add(新しい列 { columnname = "name", displaynname = "name" });
                columns.Add(新しい列 { columnname = "性別", displaynname = "性別" });
                Json を返します (新しい { code = "1", msg = "", item = item, columns = columns });
            }
            それ以外
            {
                学校アイテム = 新しい学校
                {
                    いいえ = "S001",
                    名前 = "浙江大学",
                    住所 = "浙江省"、
                };
                リスト<列> columns = 新しいリスト<列>();
                columns.Add(新しい列 { columnname = "no", displaynname = "encoding" });
                columns.Add(新しい列 { columnname = "name", displaynname = "name" });
                columns.Add(新しい列 { columnname = "address", displaynname = "address" });
                Json を返します (新しい { code = "1", msg = "", item = item, columns = columns });
            }
        }
 
        [HttpPost]
        パブリック JsonResult SaveItem(文字列オブジェクトタイプ、文字列項目文字列)
        {
            if (オブジェクトタイプ == "学生")
            {
                学生アイテム = JsonConvert.DeserializeObject<Student>(itemstring);
            }
            それ以外
            {
                学校項目 = JsonConvert.DeserializeObject<School>(itemstring);
            }
            return Json(new { ResultCode = "1", ResultMessage = "正常に保存されました!" });
        }
    }
    パブリッククラス 学生
    {
        パブリック文字列 no { get; set; }
        パブリック文字列名 { 取得; 設定; }
        パブリック文字列性別{取得;設定;}
    }
    公立学校
    {
        パブリック文字列 no { get; set; }
        パブリック文字列名 { 取得; 設定; }
        パブリック文字列アドレス { 取得; 設定; }
    }
    パブリッククラス Column
    { 
        パブリック文字列列名 { 取得; 設定; }
        パブリック文字列 displaynname { 取得; 設定; }
    }
}

@{
    ViewData["タイトル"] = "ホームページ";
}
 
<script type="text/javascript">
    var app = angular.module("my_app", []);
    app.controller('my_controller', 関数($scope) {
        //保存 $scope.saveItem = function () {
            var itemstring = JSON.stringify($scope.item)
            $.post('@Url.Action("SaveItem", "Home")', { objecttype: '@ViewBag.objecttype', itemstring: itemstring }, function (data) {
 
            });
        }
        //取得 $scope.getItem = function () {
            $.post('@Url.Action("GetItem", "Home")', { オブジェクトタイプ: '@ViewBag.objecttype' }, 関数 (結果) {
                スコープ内のアイテムを結果アイテムに変換します。
                $scope.columns = 結果.columns;
                $スコープを適用します。
            });
        }
        スコープを取得します。
    });
</スクリプト>
<div>
    <ul>
        <li ng-repeat="列内の列">
            <span>{{列.表示名}}</span>
            <input ng-if="item[column.columnname]&&item[column.columnname].length" ng-model="item[column.columnname]" />
        </li>
    </ul>
    <input type="button" value="保存" ng-click="saveItem();" />
</div>