動的な列を実現するための 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が利用できない問題を解決する
目次1. Bootstrap5 ブレークポイント1.1 モバイルファースト1.2 ブートストラップブ...
ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...
公式ウェブサイトアドレス: https://dev.mysql.com/downloads/mysq...
CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コン...
最近、MySQL関連の構文をよく見かけます。また、MySQLストアドプロシージャの書き方も学びたいの...
目次DockerコンテナのエクスポートDockerコンテナのインポートこの記事では主に、コンテナ...
目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...
目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...
目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
1: masterha_check_repl レプリカ セット エラー レプリケートが構成ファイルで...
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...
PCIE には 4 つの異なる仕様があります。下の図でそのうちの 2 つを見てみましょう。マザーボー...
ガラス窓今日実現するのは雨滴効果です。ただし、雨滴効果を実現する前に、まずは曇りガラス効果を作成しま...