動的な列を実現するための 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: dockerでifconfigが利用できない問題を解決する
この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...
1. はじめにイメージマップを使用すると、画像の領域をホットスポットとして指定できます。この領域にマ...
目次ブラウザのレンダリングメカニズムリフローと再塗装リフロー逆流を引き起こす行為:再描画再描画を引き...
この記事では、例を使用して、MySQL 8 の共通テーブル式 (CTE) の使用方法を説明します。ご...
1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...
以前 HTML を解析したことがあるので、今日は Vue ドラッグ アンド ドロップを使用して、Ku...
質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
1. openjdkを表示する rpm -qa|grep jdk 2. openjdk を削除します...
序文:グループ化関数はグループ内の最初のデータを取得しますが、各グループ内の最新のデータを取得する必...
ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...
MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...
この記事では、オブジェクト パラメータをインスタンス化して MySQL でデータをクエリする方法を紹...
一般的に、テーブルを使用する場合は、常に <table border="1"...
データベースを使用するアプリケーションを開発する場合、必然的にユニオンクエリを使用する必要があります...