angularjs循環對象屬性如何實現動態列

小編給大家分享一下angularjs循環對象屬性如何實現動態列，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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循環對象屬性如何實現動態列”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！