我们如何使用 Angular JS 从 MVC 数据库中的单个表中创建树视图答案

【问题标题】：How we can create treeView using Angular JS from Single table in Database in MVC我们如何使用 Angular JS 从 MVC 数据库中的单个表中创建树视图
【发布时间】：2017-04-17 09:39:18
【问题描述】：

这是我的表结构：

我想在MVC中创建州--->区-->市-->村的TREEVIEW格式

这是我的查询：

CREATE TABLE [dbo].[countrylist] 
( 
    [countrylistid]      [INT] IDENTITY(1, 1) NOT NULL, 
    [kodepos_postcode]   [VARCHAR](50) NULL, 
    [kelurahan_village]  [VARCHAR](50) NULL, 
    [kecamatan_district] [VARCHAR](50) NULL, 
    [jenis_type]         [VARCHAR](50) NULL, 
    [kab_city]           [VARCHAR](50) NULL, 
    [propinsi_state]     [VARCHAR](50) NULL, 
    CONSTRAINT [PK_countryList] PRIMARY KEY CLUSTERED ( [countrylistid] ASC ) 
    WITH (pad_index = OFF, statistics_norecompute = OFF, ignore_dup_key = OFF, 
    allow_row_locks = on, allow_page_locks = on) ON [PRIMARY] 
) 
ON [PRIMARY]

【问题讨论】：

通常 Stackoverflow 不会回答过于宽泛的“我该怎么做”类型的问题。在这种情况下，您似乎几乎没有自己做任何研究来开发树视图或找到一个包来制作树视图。此外，可以改进您问题的格式以提高可读性。见stackoverflow.com/help/how-to-ask

标签： javascript jquery angularjs sql-server asp.net-mvc

【解决方案1】：

您需要执行以下步骤，

从数据库中获取数据
在 javascript 中准备树结构并将其存储到范围变量中
将该变量绑定到 UI

一旦我们得到正确的树状结构数据，我们就可以使用递归模板来渲染它。

DEMO

我认为你的数据像

数据

scope.dataFromDB= [
              {'id':1 ,'propinsi_STATE' : 0, 'village':"State 1"},
              {'id':4 ,'propinsi_STATE' : 2 ,'village':"Taluka 1.1"},
              {'id':3 ,'propinsi_STATE' : 1, 'village':"District 2"},
              {'id':5 ,'propinsi_STATE' : 0, 'village':"State 2"},
              {'id':6 ,'propinsi_STATE' : 0, 'village':"State 3"},
              {'id':2 ,'propinsi_STATE' : 1, 'village':"District 1"},
              {'id':7 ,'propinsi_STATE' : 4, 'village':"village 1.1.1"},
              {'id':8 ,'propinsi_STATE' : 1, 'village':"District 3"},
              {'id':9 ,'propinsi_STATE' : 3, 'village':"Taluka 2.1"}
              ];

HTML

<div my-directive></div>
    <script id="myDirectiveTemplate" type="text/ng-template">
          <ul>
            <li ng-repeat="item in items">
              {{item.village}}
              <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
            </li>
          </ul>
    </script>
   <script type="text/ng-template" id="itemTemplate">
    <ul>
      <li ng-repeat="item in item.children">
          {{item.village}}
         <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div>
      </li>
    </ul>
  </script>

希望对你有所帮助。

【讨论】：