Shulou(Shulou.com)06/02 Report--

Editor to share with you how the angularjs loop object properties to achieve dynamic columns, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Angularjs Loop object Properties implement dynamic columns

Advantages: save objects and save only one piece of data in the database

Disadvantages: adding object properties requires modifying the table structure, code, and then republishing

Realization idea

1) create tables (objects) and fields (object properties) in the database

2) generate configuration table based on tables (objects) and fields (object properties)

3) generate a three-tier architecture based on tables (objects) and fields (object attributes)

4) the demo code is as follows

1. Interface code:

Using Microsoft.AspNetCore.Mvc;using Microsoft.Extensions.Logging;using Newtonsoft.Json;using System;using System.Collections.Generic;using System.Diagnostics;using System.Linq;using System.Threading.Tasks;using WebApplication1.Models; namespace WebApplication1.Controllers {public class HomeController: Controller {public IActionResult Index (string objecttype) {ViewBag.objecttype = objecttype; return View () } [HttpPost] public JsonResult GetItem (string objecttype) {if (objecttype = = "student") {Student item = new Student {no = "S001", name = "Zhang San", gender = "male",} List columns = new List (); columns.Add (new Column {columnname = "no", displaynname= "student number"}); columns.Add (new Column {columnname = "name", displaynname= "name"}); columns.Add (new Column {columnname = "gender", displaynname= "gender"}) Return Json (new {code = "1", msg = "", item = item, columns = columns}) } else {School item = new School {no = "S001", name = "Zhejiang University", address = "Zhejiang",}; List columns = new List () Columns.Add (new Column {columnname = "no", displaynname = "code"}); columns.Add (new Column {columnname = "name", displaynname = "name"}); columns.Add (new Column {columnname = "address", displaynname = "address"}); return Json (new {code = "1", msg = "", item = item, columns = columns}) }} [HttpPost] public JsonResult SaveItem (string objecttype, string itemstring) {if (objecttype = = "student") {Student item = JsonConvert.DeserializeObject (itemstring);} else {School item = JsonConvert.DeserializeObject (itemstring) } return Json (new {ResultCode = "1", ResultMessage = "saved successfully!" Public class Student {public string no {get; set;} public string name {get; set;} public string gender {get; set;}} public class School {public string no {get; set;} public string name {get; set;} public string address {get; set }} public class Column {public string columnname {get; set;} public string displaynname {get; set;}

2.angularjs front-end code

@ {ViewData ["Title"] = "Home Page";} var app = angular.module ("my_app", []) App.controller ('my_controller', function ($scope) {/ / Save $scope.saveItem = function () {var itemstring = JSON.stringify ($scope.item) $.post (' @ Url.Action ("SaveItem", "Home")', {objecttype:'@ ViewBag.objecttype', itemstring: itemstring}, function (data) {}) } / / get $scope.getItem = function () {$.post ('@ Url.Action ("GetItem", "Home")', {objecttype:'@ ViewBag.objecttype'}, function (result) {$scope.item = result.item; $scope.columns = result.columns; $scope.$apply ();}) } $scope.getItem ();}); {{column.displaynname}} above is all the content of the article "how angularjs Loop object Properties implement dynamic columns". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.