Question

我希望显示从json到某些面板的所有信息。在我的json中，我有两种员工（技术人员和工程师）。

每个员工都有一些值存储在value_1和value_2中，我希望通过这些值显示它们。在每个值（value_1和value_2）中，我都有一些信息（年份和文件名的路径）。

在每个面板标题中，我想要名称（例如：Tech 1），在主体中所有按钮都带有年份和文件名作为链接。

我们的想法是将它们与value_1和value_2分开显示。（例如，所有技术人员按value_1然后按value_2）

例如：所有技术人员按value_1

<div class="panel panel-info" ng-repeat="tech in technicians">
   <div class="panel-heading">
      <h3 class="panel-title">{{tech}}</h3>
   </div>
   <div class="panel-body">
      <a href="{{tech.value1.file}}" class="btn btn-default" ng-repeat="year in tech.value1.year">{{year}}</a>
   </div>
 </div>

但是不起作用

json文件看起来像这样

{
    "technicians": [
    {
        "Tech 1": [
        {
            "value_1": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        },
        {
            "value_2": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        }]
    },
    {
        "Tech 2": [
        {
            "value_1": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        },
        {
            "value_2": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        }]
  }],
  "inginiersl": [
   {
      "Inginier 1": [
        {
            "value_1": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        },
        {
            "value_2": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        }]
   },
   {
      "Inginier 2": [
        {
            "value_1": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        },
        {
            "value_2": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        }]
  }]
}

我创建了一个控制器，我得到了json文件：

 app.controller("my_Ctrl", function($scope, $http){  
    $http.get('json/employees.json')
        .then(function(res){
             $scope.technicians = res.data["technicians"];
             $scope.inginiers = res.data["inginiers"];

        });
});

Answer 1

你可以这样做，

 <div ng-controller="listController">
    <div class="panel panel-info" ng-repeat="(key, prop) in technicians">
      <div class="panel-heading" ng-repeat="(key2, prop2) in prop">
        <h3 class="panel-title">{{key2}}</h3>
      </div>
      <div class="panel-body" ng-repeat="(key3, prop3) in prop">
        <div ng-repeat="vale in prop3">
          <a href="{{year.year.file}}" class="btn btn-default" ng-repeat="year in vale.value_1">{{year.year}}</a>
        </div>
      </div>
    </div>
  </div>

<强> DEMO

Answer 2

请将数组名称正确放置，例如“Tech 1”到“Tech1”非间距，您可以像下面这样访问您的json：

<强>的Json

{
   "technicians": [
   {
       "Tech1": [
       {
           "value_1": [
           {
               "year": 2014,
               "file": "path_to_the_file"
           },
           {
                "year": 2015,
                "file": "path_to_the_file"
           }]
       },
       {
           "value_2": [
           {
               "year": 2014,
               "file": "path_to_the_file"
           },
           {
               "year": 2015,
               "file": "path_to_the_file"
           }]
      }]
    },
    {
        "Tech2": [
        {
            "value_1": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        },
        {
            "value_2": [
            {
                "year": 2014,
                "file": "path_to_the_file"
            },
            {
                "year": 2015,
                "file": "path_to_the_file"
            }]
        }]
  }]
}

在Html中

<div class="panel panel-info" ng-repeat="tech in technicians">
<div class="panel-heading">
  <h3 class="panel-title" ng-model="tech.Tech1">{{tech}}</h3>
</div>
<div class="panel-body">
    <div ng-repeat="x in tech.Tech1">
        <a href="{{x.file}}" class="btn btn-default">{{year}}</a>
    </div>
</div>

使用angularjs在面板中显示json信息

2 个答案: