角度选择/下拉分层数据

Question

角度选择/下拉分层数据

我有一个文件夹结构，我想使用 angular 将其放入 html 选择中。

我在下面创建了一个示例，显示了结构并将其输出到嵌套列表结构中。我也把它放到了选择中，但它只显示了文件夹的顶层。有没有办法让选择显示所有带有缩进的文件夹，以便您可以直观地看到选择中的结构？

我可以将另一个属性添加到具有文件夹深度的文件夹中，以帮助缩进。这些文件夹是用户在系统中定义的，所以如果不查看数据，我不知道它有多少个级别。

谢谢

var app = angular.module("selectFolderApp", []);

app.controller("selectFolderController", ['$http', '$scope',
  function($http, $scope) {

    var ctrl = this;

    ctrl.folders = [{
      "name": "Housing",
      "id": "1",
      "children": [{
        "name": "Datasheets",
        "id": "2",
        "children": [{
          "name": "Folder 1",
          "id": "3",
          "children": []
        }, {
          "name": "Folder 2",
          "id": "4",
          "children": []
        }]
      }, {
        "name": "Charts",
        "id": "5",
        "children": [{
          "name": "Folder A",
          "id": "6",
          "children": []
        }, {
          "name": "Folder B",
          "id": "7",
          "children": []
        }, {
          "name": "Folder C",
          "id": "8",
          "children": [{
              "name": "Sub Folder 1",
              "id": "9",
              "children": []
            }, {
              "name": "Sub Folder 2",
              "id": "10",
              "children": []
            }

          ]
        }, {
          "name": "Folder D",
          "id": "11",
          "children": []
        }, {
          "name": "Folder E",
          "id": "12",
          "children": []
        }]
      }]
    }, {
      "name": "Road Works",
      "id": "13",
      "children": [{
        "name": "Datasheets",
        "id": "14",
        "children": [{
          "name": "Folder 1",
          "id": "15",
          "children": [{
            "name": "Sub Folder 1",
            "id": "16",
            "children": []
          }]
        }, {
          "name": "Folder 2",
          "id": "17",
          "children": []
        }, {
          "name": "Folder 3",
          "id": "18",
          "children": []
        }, {
          "name": "Folder 4",
          "id": "19",
          "children": []
        }]
      }, {
        "name": "Charts",
        "id": "20",
        "children": [{
          "name": "Folder A",
          "id": "21",
          "children": []
        }, {
          "name": "Folder B",
          "id": "22",
          "children": []
        }, {
          "name": "Folder C",
          "id": "23",
          "children": []
        }]
      }]
    }];

  }
]);

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="selectFolderApp">

  <div ng-controller="selectFolderController as ctrl">

    <br>{{ ctrl.folderId }}
    <br>

    <br>

    <select class="form-control" ng-model="ctrl.folderId" ng-options="item.id as item.name for item in ctrl.folders">
      <option></option>
    </select>

    <br>

    <script type="text/ng-template" id="folderTree">
      {{item.name}}
      <ul>
        <li ng-repeat="item in item.children" ng-include="'folderTree'"></li>
      </ul>
    </script>

    <ul>
      <li ng-repeat="item in ctrl.folders" ng-include="'folderTree'"></li>
    </ul>

  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kat*_*ugh 5

将您的文件夹结构转换为对象的平面列表，每个对象都有一个级别属性。然后，您可以使用此属性直观地缩进 select 元素中的值。

var app = angular.module("selectFolderApp", []);

app.controller("selectFolderController", ['$http', '$scope',
  function($http, $scope) {

    var ctrl = this;

    ctrl.folders = [{
      "name": "Housing",
      "id": "1",
      "children": [{
        "name": "Datasheets",
        "id": "2",
        "children": [{
          "name": "Folder 1",
          "id": "3",
          "children": []
        }, {
          "name": "Folder 2",
          "id": "4",
          "children": []
        }]
      }, {
        "name": "Charts",
        "id": "5",
        "children": [{
          "name": "Folder A",
          "id": "6",
          "children": []
        }, {
          "name": "Folder B",
          "id": "7",
          "children": []
        }, {
          "name": "Folder C",
          "id": "8",
          "children": [{
              "name": "Sub Folder 1",
              "id": "9",
              "children": []
            }, {
              "name": "Sub Folder 2",
              "id": "10",
              "children": []
            }

          ]
        }, {
          "name": "Folder D",
          "id": "11",
          "children": []
        }, {
          "name": "Folder E",
          "id": "12",
          "children": []
        }]
      }]
    }, {
      "name": "Road Works",
      "id": "13",
      "children": [{
        "name": "Datasheets",
        "id": "14",
        "children": [{
          "name": "Folder 1",
          "id": "15",
          "children": [{
            "name": "Sub Folder 1",
            "id": "16",
            "children": []
          }]
        }, {
          "name": "Folder 2",
          "id": "17",
          "children": []
        }, {
          "name": "Folder 3",
          "id": "18",
          "children": []
        }, {
          "name": "Folder 4",
          "id": "19",
          "children": []
        }]
      }, {
        "name": "Charts",
        "id": "20",
        "children": [{
          "name": "Folder A",
          "id": "21",
          "children": []
        }, {
          "name": "Folder B",
          "id": "22",
          "children": []
        }, {
          "name": "Folder C",
          "id": "23",
          "children": []
        }]
      }]
    }];

    var times = function (n, str) {
        var result = '';
        for (var i = 0; i < n; i++) {
            result += str;
        }
        return result;
    };

    var recur = function (item, level, arr) {
        arr.push({
            name: item.name,
            id: item.id,
            level: level,
            indent: times(level, '–')
        });

        if (item.children) {
            item.children.forEach(function (item) {
                recur(item, level + 1, arr);
            });
        }
    };

    ctrl.flatFolders = [];
    ctrl.folders.forEach(function (item) {
        recur(item, 0, ctrl.flatFolders);
    });
  }
]);

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="selectFolderApp">

  <div ng-controller="selectFolderController as ctrl">

    <select class="form-control" ng-model="ctrl.folderId">
      <option ng-repeat="item in ctrl.flatFolders" ng-value="{{ item.id }}">
          {{ item.indent }} {{ item.name }}
      </option>
    </select>

  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，10 月前
查看次数：	2965 次
最近记录：	9 年，10 月前