从json获取数据并相应地显示Angular js

Question

我是角j的新手。这对你们许多人来说可能是件小事。 你能指导我吗？ 我有一个json文件，一个要显示的视图，index.html（视图）和一个控制器（index_angular.js）。在图像中，第二列和第三列是对应于json中技术id的下拉菜单。

如何根据附件中的图像解析json并在视图中显示。

提前致谢。

JSON STRUCTURE：

{
    "technology": [
        {
            "id": "AKC",
            "detail": {
                "drop1": [
                    {
                        "id": "AKC-lst-1231"
                    },
                    {
                        "id": "AKC-lst-1232"
                    },
                    {
                        "id": "AKC-lst-1233"
                    }
                ],
                "drop2": [
                    {
                        "id": "T_AKC_live"
                    },
                    {
                        "id": "T_AKC_Capt"
                    },
                    {
                        "id": "T_AKC_live1"
                    }
                ]
            }
        },
        {
            "id": "MET",
            "detail": {
                "drop1": [
                    {
                        "id": "MET-2st"
                    },
                    {
                        "id": "MET-34"
                    }
                ],
                "drop2": [
                    {
                        "id": "sd-232"
                    },
                    {
                        "id": "sd-121"
                    }
                ]
            }
        }
    ]
}

在Angular JS中显示在视图中的必需格式：

Coloumn 2和coloumn 3是相应技术ID的drop1和drop2的下拉菜单

index_angular.js（CONTROLLER）

var myModule=angular.module('test',[]);
myModule.controller("test_controller", function($scope,$http){
            $scope.message = "hello world!";
            $scope.posts = "";
            $scope.init=function(){

            $scope.friends = ["Test friends","test1","test2","test4","test5","test6","test7","test8","test9","test10","test11","test12","test13","test113","test14","test114","test15","test133","test23","test33","test35"];


            $http.get("test.json").
            success(function(data, status, headers, config) {
            $scope.posts = data;
            alert($scope.posts);
            $scope.tech_name=[];
            $scope.technology="";
            console.log($scope.posts);
            var tech_marker_count= $scope.posts.technology.length;
            alert(tech_marker_count);//count of technology

            for(var tech_marker=0;tech_marker<tech_marker_count;tech_marker++)
            {
             $scope.tech_name.push($scope.posts.technology[tech_marker].id);
             $scope.technology=$scope.posts.technology[tech_marker].id;
             alert( $scope.technology);
            }

            }).
            error(function(data, status, headers, config) {
            alert("Error fetching data");
      // log error
    });

};      
        });

的index.html（VIEW）

 <div class="view_data"> 
       <ul>

       </ul>
  </div>

Answer 1

您可以使用ng-repeat帮助您循环浏览json

您的HTML将如下所示，

<强> HTML

  <div class="view_data" ng-init="init()"> 
       <div ng-repeat="d in posts.technology|orderBy: 'id'">
         {{d.id}}
         |<span ng-repeat="drop1Item in d.detail.drop1">{{drop1Item.id}}</span>
         |<span ng-repeat="drop2Item in d.detail.drop2">{{drop2Item.id}}</span>
       </div>
  </div>

Working Plunkr需要一些造型。

现在轮到做设计了。感谢。