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

 更新时间:2021年11月01日 16:45:00   作者:曹振华  
这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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动态列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • angular.element方法汇总

    angular.element方法汇总

    本文主要给大家汇总了一下angular.element的方法,十分的详细,这里推荐给大家 参考下。
    2015-01-01
  • 浅谈angularJS中的事件

    浅谈angularJS中的事件

    下面小编就为大家带来一篇浅谈angularJS中的事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 详解Angular的8个主要构造块

    详解Angular的8个主要构造块

    Angular 主要分为八大构造块(也就是八个核心概念):模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下
    2017-06-06
  • Angular2内置指令NgFor和NgIf详解

    Angular2内置指令NgFor和NgIf详解

    Directive的概念在Angular 1.x就存在了,我对它的认识比较模糊,所以直接通过一些例子来说明。Angular提供的内置执行有很多,这次使用两个:ngFor、ngIf。
    2016-08-08
  • angular动态删除ng-repaeat添加的dom节点的方法

    angular动态删除ng-repaeat添加的dom节点的方法

    本篇文章主要介绍了angular动态删除ng-repaeat添加的dom节点的方法,非常具有实用价值,需要的朋友可以参考下
    2017-07-07
  • 关于Angularjs中跨域设置白名单问题

    关于Angularjs中跨域设置白名单问题

    这篇文章主要介绍了Angularjs中关于跨域设置白名单问题,需要的朋友可以参考下
    2018-04-04
  • Angular实现的简单定时器功能示例

    Angular实现的简单定时器功能示例

    这篇文章主要介绍了Angular实现的简单定时器功能,结合实例形式分析了AngularJS定时器功能的简单实现与使用技巧,需要的朋友可以参考下
    2017-12-12
  • 关于Angularjs中自定义指令一些有价值的细节和技巧小结

    关于Angularjs中自定义指令一些有价值的细节和技巧小结

    这篇文章主要介绍了关于Angularjs中自定义指令一些有价值的细节和技巧小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    在学习了如何简单开始一个Angular程序之后,跟着网上的教程我也来实现一个购物车功能,为了减少页面样式设计我使用了bootstrap来偷懒,现在分享给大家,有需要的可以参考借鉴。
    2016-08-08
  • AngularJS动态生成select下拉框的方法实例

    AngularJS动态生成select下拉框的方法实例

    这篇文章主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11

最新评论