Question

我是AngularJS的新手，我需要你的帮助。我创建了一个JSON文件，其中包含另一个列表中的项目列表。我想访问第二个列表中的项目，但我不知道如何。我在互联网上搜索了一整天，但我几乎找不到任何有用的东西。请帮我。以下是我的代码：

categoryItems.json

[  
   {  
      "$id":"1",
      "name":"Business",
      "cat":[  
         {  
            "cname":"CyberSecurity",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         },
         {  
            "cname":"Google Cloud Platform for Systems Operations",
            "img":"img3_2.jpg",
            "cat_kurs":"6-course specialization",
            "txt":"University of California"
         },
         {  
            "cname":"Data Security",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         }
      ]
   },
   {  
      "$id":"2",
      "name":"Foreign Language",
      "cat":[  
         {  
            "cname":"Data Security",
            "img":"img3_1.jpg",
            "cat_kurs":"7-course specialization",
            "txt":"Rice University"
         },
         {  
            "cname":"Google Cloud",
            "img":"img3_2.jpg",
            "cat_kurs":"3-course specialization",
            "txt":"University of California"
         }
      ]
   }
]

的script.js

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "categoryItems.json",
        method: "GET",
      })
      .then(function (response) {
        return response.data;
        angular.forEach(data.itemDetails, function(item) {
        });
        });
      }
    };
    return itemsFactory;

}]);


myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function(item) {
      $scope.selected = item;
    };
    $scope.selected = {};
}]);

的index.html

<!DOCTYPE html>
<html ng-app="myItemsApp">

<head>
  <meta charset="utf-8" />
  <title>Test</title>

 <!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->


  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
        <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/> 
  <script src="js/angular.min.js"></script>
  <script src="js/angular.js"></script>

  <script src="script.js"></script>
  <style>
span.el{
    background-color:#85929E;
    font-size: xx-small;
    font-color: #FDFEFE;

    width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4  ;
}
</style>
</head>

<body>
  <div ng-controller="ItemsController">

    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
          </ul>
        </div>
      </div>

      <div class="col-md-8">
        <div class="panel panel-default" style="width: 70%">
          <div class="panel-heading">{{selected.name}}</div>
           <div class="panel-body">
           <div  ng-repeat="subcat in item.cat ">
                {{subcat.cname}}


        </div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

请帮帮我。

Answer 1

看起来您需要对子类别进行另一次ng-repeat。

<div class="col-md-8" ng-show="selected.name.length">
        <div class="panel panel-default" style="width: 70%">
          <div class="panel-heading">{{selected.name}}</div>
          <div class="panel-body">
            <div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
              <div ng-repeat="cat in subcat.cat">
                {{cat.cname}}
              </div>
            </div>
          </div>
        </div>

看看我为你嘲笑的this example

Answer 2

您需要使用angular.fromJson

反序列化响应

更多参考：https://docs.angularjs.org/api/ng/function/angular.fromJson

访问angularJS中嵌套列表中的项目

2 个答案: