Question

在我的解决方案中，我有2个项目。首先是WebAPI，我获取类：文件的FileClass，目录的DirectoryClass和ClassContext，包含文件列表和目录列表。在HomeController中，我得到方法Get（字符串路径），它返回ClassContext的实例。然后，此数据以JSON格式转换。我的第二个问题是简单的Web表单，我使用AngularJS来显示这些目录和文件。我一直在努力获取这些数据，目前正在显示目录和文件。

我的问题是：我想点击目录，然后必须打开它的子目录和文件。如何使用AngularJS执行此逻辑？

第一个项目的控制器代码：

    public ClassContext Get(string path)
    {
        List<string> directories = new List<string>();
        List<string> files = new List<string>();

        db.Directories = new List<DirectoryClass>();
        db.Files = new List<FileClass>();

        // checks if path is empty
        if (path.IsEmpty())
        {
            directories.AddRange(Environment.GetLogicalDrives());

            for (var i = 0; i < directories.Count; i++)
            {
                string str = directories[i];

                DirectoryClass dir = new DirectoryClass()
                {
                    Name = str,
                    Path = str
                };

                db.Directories.Add(dir);
            }

            return db;
        }

        DriveInfo drives = new DriveInfo(path);

        // checks if the logical drive is ready
        if (!drives.IsReady)
        {
            path = String.Empty;
            return Get(path);
        }

        // checks if there is a file with such path
        if (System.IO.File.Exists(path))
        {
            OpenFile(path);

            var lastIndex = path.LastIndexOf("\\");
            path = path.Substring(0, lastIndex);
        }

        directories.AddRange(Directory.GetDirectories(path));

        // add directories
        for (var i = 0; i < directories.Count; i++)
        {
            string fullName = directories[i];
            var lastIndex = directories[i].LastIndexOf("\\");

            string name = fullName.Substring(lastIndex + 1);

            DirectoryClass dir = new DirectoryClass()
            {
                Name = name,
                Path = fullName
            };

            db.Directories.Add(dir);
        }            

        files.AddRange(Directory.GetFiles(path));

        // add files
        for (var i = 0; i < files.Count; i++)
        {
            string fullName = files[i];
            var lastIndex = files[i].LastIndexOf("\\");

            string name = fullName.Substring(lastIndex + 1);

            FileClass file = new FileClass()
            {
                Name = name,
                Path = fullName
            };

            db.Files.Add(file);
        }

        return db;
    }

第二个项目的代码：

<!DOCTYPE html>
<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

<div ng-controller="FilesController">
    <h3>Directories:</h3>
    <div ng-repeat="item in result.Directories">
        <a href="#">{{item.Name}}</a>
    </div>

    <h3>Files:</h3>
    <div ng-repeat="item in result.Files">
        <a href="#">{{item.Name}}</a>
    </div>
</div>

<script src="Scripts/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp", []);
</script>
<script>
myApp.controller("FilesController", function($scope, $http) {
    $http.get("http://localhost:55555/api/Home?path") .success(function(response) {
        });
    });
</script>
</body>
</html>

Answer 1

要破解你的json结果看起来有点难，但我认为你要做的是获得目录和文件的嵌套视图。如果是这样的话那么你的html应该是这样的：

<div ng-controller="FilesController">
  <h3>Directories:</h3>
  <div ng-repeat="item in result.Directories">
    <a href="#">{{item.Name}}</a>
    <h3>Files:</h3>
    <div ng-repeat="file in item.Files">
      <a href="#">{{file.Name}}</a>
    </div>
  </div>
</div>

如果这不正确，请用一些示例json更新您的问题。

文件管理器使用Web.API和Angular JS

1 个答案: