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

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

動的な列を実現するための Angularjs ループ オブジェクト プロパティ

利点: オブジェクトを保存し、データベースに1つのデータのみを保存します

デメリット: オブジェクト属性を追加するには、テーブル構造とコードを変更し、再公開する必要があります。

実装のアイデア

1) データベーステーブル(オブジェクト)とフィールド(オブジェクト属性)を作成する

2) テーブル(オブジェクト)とフィールド(オブジェクト属性)に基づいて構成テーブルを生成する

3) テーブル(オブジェクト)とフィールド(オブジェクト属性)に基づいて3層アーキテクチャを生成する

4) デモコードは次のとおりです

1. インターフェースコード:

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 { 取得; 設定; }
    }
}

2. AngularJS フロントエンドコード

@{
    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>

これで、AngularJS でオブジェクト プロパティをループして動的列を実装する方法に関するこの記事は終了です。AngularJS の動的列に関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScriptはオブジェクトの不要なプロパティを削除します
  • springboot post インターフェースが json を受け入れる場合、それがオブジェクトに変換されると、プロパティはすべて null になります。
  • JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法
  • JavaScript でオブジェクトのプロパティを削除する方法
  • js 属性オブジェクトの hasOwnProperty メソッドの使用
  • JS hasOwnProperty() メソッドは、プロパティがオブジェクト自身のプロパティであるかどうかを検出します。
  • 例を通して JavaScript の Date オブジェクトのプロパティとメソッドを解析する
  • Java オブジェクトを JSON に変換する際のプロパティの動的な追加、削除、変更、クエリの詳細な説明
  • オブジェクトをJSONに変換する場合、Java jacksonはサブオブジェクトのプロパティ操作を無視します。
  • JavaScript オブジェクトの 3 つのプロパティ

<<:  高性能なウェブサイトのための14のテクニック

>>:  dockerでifconfigが利用できない問題を解決する

推薦する

MySQL クロスデータベーストランザクション XA 操作の例

この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...

CSSでイメージマッピングを実装する方法

1. はじめにイメージマップを使用すると、画像の領域をホットスポットとして指定できます。この領域にマ...

Web面接でよくある質問:リフローとリペイントの原理と違い

目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為:再描画再描画を引き...

mysql8 共通テーブル式 CTE 使用例の分析

この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...

Vue はネストされたルーティングメソッドの例を実装します

1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...

v-html レンダリング コンポーネントの問題

以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...

CSS変数を使用してスタイルを変更する方法の例

質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...

Mysql での結合操作

結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...

Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要

1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...

各グループの最新データを取得するためにMySQLベースのグループを実装する

序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...

Mysql | ワイルドカード(%、_ など)を使用したファジークエリの詳細な説明

ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...

MySQL の一般的な日付比較および計算関数

MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...

インスタンス化されたオブジェクトパラメータによるMySQLクエリ例の説明

この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

SQL 結合クエリの内部結合、外部結合、クロス結合の違いの詳細な説明

データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...