angularjs循環(huán)對象屬性實現(xiàn)動態(tài)列的思路詳解
angularjs循環(huán)對象屬性實現(xiàn)動態(tài)列
優(yōu)點:保存對象,在數(shù)據(jù)庫只保存一條數(shù)據(jù)
缺點:添加對象屬性需要修改表結(jié)構(gòu)、代碼,然后重新重新發(fā)布
實現(xiàn)思路
1)數(shù)據(jù)庫創(chuàng)建表(對象)、創(chuàng)建字段(對象屬性)
2)根據(jù)表(對象)、字段(對象屬性)生成配置表
3)根據(jù)表(對象)、字段(對象屬性)生成三層架構(gòu)
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>
到此這篇關(guān)于angularjs循環(huán)對象屬性實現(xiàn)動態(tài)列的文章就介紹到這了,更多相關(guān)angularjs動態(tài)列內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Angular6 Filter實現(xiàn)頁面搜索的示例代碼
這篇文章主要介紹了Angular6 Filter實現(xiàn)頁面搜索的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
AngularJS路由實現(xiàn)頁面跳轉(zhuǎn)實例
這篇文章主要為大家詳細介紹了AngularJS路由實現(xiàn)頁面跳轉(zhuǎn)的實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03
理解Angular的providers給Http添加默認headers
本篇文章主要介紹了理解Angular的providers給Http添加默認headers,具有一定的參考價值,有興趣的同學可以了解一下2017-07-07
Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧,感興趣的小伙伴們可以參考一下2016-04-04

