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が利用できない問題を解決する

推薦する

Bootstrap5 ブレークポイントとコンテナの具体的な使用法

目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...

MySql 8.0.11 のインストールと設定のチュートリアル

公式ウェブサイトアドレス: https://dev.mysql.com/downloads/mysq...

CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明

CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コン...

Windows での MySQL コミュニティ サーバー 8.0.16 のインストールと構成方法のグラフィック チュートリアル

最近、MySQL関連の構文をよく見かけます。また、MySQLストアドプロシージャの書き方も学びたいの...

Dockerコンテナのエクスポートとインポートの例

目次DockerコンテナのエクスポートDockerコンテナのインポ​​ートこの記事では主に、コンテナ...

ReactプロジェクトでのTypeScriptの実装

目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...

MySQLデータベースの名前を高速かつ安全に変更する方法(3種類)

目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

MySQL MHA のセットアップと切り替えに関するいくつかのエラー ログの概要

1: masterha_check_repl レプリカ セット エラー レプリケートが構成ファイルで...

標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明

MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

Linux で PCIe のバージョンと速度を確認する方法

PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...

CSS で雨滴アニメーション効果を実装するサンプルコード

ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...