您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

angularjs循环对象属性实现动态列的思路详解

51自学网 2022-02-21 13:38:33
  javascript

angularjs循环对象属性实现动态列

优点:保存对象,在数据库只保存一条数据

缺点:添加对象属性需要修改表结构、代码,然后重新重新发布

实现思路

1)数据库创建表(对象)、创建字段(对象属性)

2)根据表(对象)、字段(对象属性)生成配置表

3)根据表(对象)、字段(对象属性)生成三层架构

4)demo代码如下

1.接口代码:

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 = "张三",                    gender = "男",                };                List<Column> columns = new List<Column>();                columns.Add(new Column { columnname = "no", displaynname="学号" });                columns.Add(new Column { columnname = "name", displaynname = "姓名" });                columns.Add(new Column { columnname = "gender", displaynname = "性别" });                return Json(new { code = "1", msg = "", item = item, columns = columns });            }            else            {                School item = new School                {                    no = "S001",                    name = "浙江大学",                    address = "浙江",                };                List<Column> columns = new List<Column>();                columns.Add(new Column { columnname = "no", displaynname = "编码" });                columns.Add(new Column { columnname = "name", displaynname = "名称" });                columns.Add(new Column { columnname = "address", displaynname = "地址" });                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 = "保存成功!" });        }    }    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前端代码

@{    ViewData["Title"] = "Home Page";} <script type="text/javascript">    var app = angular.module("my_app", []);    app.controller('my_controller', function ($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")', { 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="保存" ng-click="saveItem();" /></div>

到此这篇关于angularjs循环对象属性实现动态列的文章就介绍到这了,更多相关angularjs动态列内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
vue实现两列水平时间轴的示例代码
js中hasOwnProperty的属性及实例用法详解
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。