Javascript 如何在MVC中使用Angular JS从数据库中的单个表创建treeView

这是我的表格结构：

我想在MVC中创建State-->district-->city-->village的树状视图格式

这是我的疑问：

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] 

---

以下是您需要执行的步骤

从数据库中获取数据

在javascript中准备树结构并将其存储到范围变量中

将该变量绑定到UI

一旦我们得到了正确的树结构数据，我们就可以使用递归模板来呈现它

我认为你的数据

数据

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>

{{item.village}




{{item.village}

---

我希望这会对您有所帮助。

通常Stackoverflow不会回答过于宽泛的“我该怎么做”类型的问题。在这种情况下，似乎您自己很少研究开发treeview或找到制作treeview的包。此外，可以改进问题的格式以提高可读性。看见