Detailed explanation of the idea of implementing dynamic columns in angularjs loop object properties

Angularjs loop object properties to achieve dynamic columns

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

Disadvantages: Adding object attributes requires modifying the table structure, code, and then republishing

Implementation ideas

1) Create database tables (objects) and fields (object attributes)

2) Generate a configuration table based on tables (objects) and fields (object attributes)

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<Column> columns = new List<Column>();
                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<Column> columns = new List<Column>();
                columns.Add(new Column { columnname = "no", displaynname = "encoding" });
                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<Student>(itemstring);
            }
            else
            {
                School item = JsonConvert.DeserializeObject<School>(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";
}
 
<script type="text/javascript">
    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();
    });
</script>
<div>
    <ul>
        <li ng-repeat="column in columns">
            <span>{{column.displaynname}}</span>
            <input ng-if="item[column.columnname]&&item[column.columnname].length" ng-model="item[column.columnname]" />
        </li>
    </ul>
    <input type="button" value="Save" ng-click="saveItem();" />
</div>

This is the end of this article about how to implement dynamic columns by looping object properties in angularjs. For more relevant angularjs dynamic column content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript removes unnecessary properties of an object
When the springboot post interface accepts json, when it is converted to an object, the properties are all null.
Several ways to easily traverse object properties in JS
How to delete a property of an object in JavaScript
Use of hasOwnProperty method of js attribute object
The JS hasOwnProperty() method detects whether a property is an object's own property.
Parsing javascript Date object properties and methods through examples
Detailed explanation of dynamic addition, deletion, modification and query of properties when converting Java objects to JSON
When converting an object to json, java jackson ignores a property operation of the sub-object
Three properties of javascript objects

<<: 14 techniques for high-performance websites

>>: Solve the problem of ifconfig being unavailable in docker