Question

我在php中有一堆for循环，它将文件夹名称和文件位置提供给6维数组。以下是循环背后的代码：https://gist.github.com/anonymous/66aa7cabe47f91eda6835e193d04a92d

我有一个单页面应用程序，它根据这些文件夹名称/数组大小显示信息。这些是我需要遍历的文件夹级别：

环境（其中有4个）
功能名称（其中未定义的值）
日期（日期 - 未定义的值）
时间（时间戳 - 其中未定义的值）
报告链接（服务器上html文件的文件位置^基于上述文件夹结构 - 其中未定义的值）
.json文件位置^基于上面的文件夹结构 - 其中未定义的值

我写了一些PHP代码json_encode是$folderStructure数组，然后json_decode是一个很好的可读格式：

<?php

    require('data.php');

    $data = json_encode($folderStructure); // decode the JSON into an associative array

    $changed = json_decode($data, true);

    echo '<pre>' . print_r($changed, true) . '</pre>'; // This will print out the contents of the array in a nice readable format

?>

输出为：https://gist.github.com/anonymous/944e97b98596454a27cc8236a4420dbd

如您所见，有很多数据。随着阵列大小的增加，数据的加载将花费更长的时间。我被建议使用AngularJS来显示页面内容（而不是我目前的内容 - https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffe（非常非常有用）。传播显然要快得多，因此合理的解决方案是转换这个单页面应用程序将在AngularJS中编写。

我已经体验过以下内容：

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div ng-controller="controllerName">
    <ul>
        <li ng-repeat="(environment, number) in items">{{environment}}: {{number}}</li>
    </ul>

</div>

    <script>
        angular.module('app', [])
            .controller('controllerName', function($scope)
            {
                $scope.items = {'DEV':10, 
                                'Production':12
                                ,'Staging':10
                                ,'QA':12

                                };
            });
    </script>
</body>
</html>

想知道我是否有可能将我的PHP数组转换为其中一个items对象并使用ng-repeat来显示信息而不是PHP。这是否可以实现？我对如何实现这一点感到有点难过，有人能帮助我吗？

编辑：我当前的PHP解决方案有效，但是因为它依赖于数组而慢。我想要实现的是类似于此的内容：

除了用AngularJS编写（使用字典中的ng-repeat）而不是PHP中的for循环。

所以基于我当前的设计把它放在黑白中：https://gist.github.com/anonymous/429747625b113df0bed30c727a338ffe - 如何将$folderStructure数组转换成某种对象或字典，然后使用它来显示关于页面使用ng-repeat？

编辑2：Why would json_encode not work? JSON is Javascript Object Notation. 哦，那好吧。如何将数组的值传递到：$scope.items并创建一个名称值对而不自己对值进行硬编码？ 1）我不知道environment的最初$folderStructure数组位置之后的文件夹名称，因为它们一直在变化。 2）我也不知道未来阵列有多大。

编辑3：

我已经将index.php中的一些代码更改为如下所示：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>

        <div ng-controller="myCtrl">

            <p>{{myStuff}}</p>

        </div>

        <script>
            var app = angular.module('myApp', []);

            // get the data using a http request
            app.controller('myCtrl', function($scope, $http) 
            {
                $http.get("php/get_data.php").then(function (response) 
                {
                    $scope.myStuff = response.data;
                });
            });


        </script>
    </body>
</html>

问题是，myStuff的输出字面意思是：pastebin.com/CyiZ5UhG

我有没有办法迭代这个输出并对每个标题使用ng-repeat（我不知道标题是什么）？

Answer 1

您可以像这样嵌套ngRepeat：

<div ng-repeat="item in items">
  <div ng-repeat="itemChild_level1 in item">
    <div ng-repeat="itemChild_level2 in itemChild_level1>
      ...
      <p>{{ itemChild_levelX.property</p>
    </div>
  </div>
</div>

Answer 2

好吧，我会尽量保持简短;

我认为你的问题是如何注入json，最简单的就是用这种方式注入：

    <script>
        angular.module('app', [])
            .controller('controllerName', function($scope, $datasources){
                $scope.items = $datasources["dataset1"];
            }).value("$datasources", {
               dataset1:<?php echo json_encode($data); ?>,
            });
    </script>

但是，我建议你进一步阅读角度服务。我要做的是创建一个通过$ http指令检索该数据的服务，并在控制器声明中调用它，如下所示：

            .factory("DataService", function($http, $q){
                return{
                    get:function(){
                       var deferred = $q.defer();

                       $http.get("urlWithData").then(function(data){
                          deferred.resolve(data)
                       }, function(error){
                          deferred.reject(error);
                       })
                       return deferred.promise;
                    }
            })
            ....
            .controller('controllerName', function($scope, DataService){
                DataService.get().then(function(data){
                     $scope.items = data;
                });
            })

修改

用于遍历记录的html代码（请将其用作提示，老实说，不要在pastebin中研究该代码的结构^^）：

<!DOCTYPE html> <html ng-app="myApp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div ng-controller="myCtrl"> <ul> <li ng-repeat = "(index, item) in myStuff"> <ul ng-if = 'typeof item == 'Array'"> <li ng-repeat = "(subindex, subitem) in item"></li> etc ... </ul> <p ng-if= "typeof item == 'String'">{{item}}</p> </li> </ul> </div> <script> var app = angular.module('myApp', []); // get the data using a http request app.controller('myCtrl', function($scope, $http) { $http.get("php/get_data.php").then(function (response) { $scope.myStuff = response.data; }); }); </script> </body> </html>
顺便说一下，为什么这么深的嵌套在你的数据中？似乎不必要地复杂了

将PHP数组转换为项目对象以与AngularJS一起使用

2 个答案: