angularjs循环对象属性实现动态列的思路详解
短信预约 -IT技能 免费直播动态提醒
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动态列内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
