Question

我正在尝试学习AngularJS并完成了Codeacademy和Code School课程，但我无法弄清楚如何将JSON数据加载到多个div中。

我在这里尝试做的事情有点小提琴： http://jsfiddle.net/oqk7tukL/1/

所以在我的控制器代码中我有一些'JSON'数据，这就是我将如何存储传递给我的应用程序的JSON。我需要做的是有一个显示在div中的所有项目的列表，并将每个项目的所有模块作为单独div中的列表。现在我的代码根本没有加载任何东西，我不确定它有什么问题。

JS

function DataController($scope) {

  $scope.project = [
      {
          name: 'Trello',
          desc: 'Project management app.',
          modules: [
              {
                name: 'Trello1',
                desc: '1st Trello'
              },
              {
                name: 'Trello2',
                desc: '2nd Trello'
              }            
          ]
      },
      {
          name: 'Straw Poll',
          desc: 'Poll creation app.',
          modules: [
              {
                name: 'Straw Poll1',
                desc: '1st Straw Poll'
              },
              {
                name: 'Straw Poll2',
                desc: '2nd Straw Poll'
              }            
          ]
      }    
  ];

};

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<div ng-app>

    <div ng-controller="DataController as dcon">

       <div>
          <ul>
            <li ng-repeat="proj in project">{{proj.name}}</li>  
          </ul>
      </div>

      <div>
          <ul>
            <li ng-repeat="mod in proj.module">{{mod.name}}</li>
          </ul>
      </div>

   </div>

</div>

我在另一个网站上发现了一个数据发布的例子，并且它的JS布局类似于我没有使用var app等的情况。这是当前的做法，还是使用不良做法的例子？

Answer 1

我做了一些改变：

<强> JS

var myApp = angular.module('myApp', ['angular.filter']);
myApp.controller('DataController', ['$scope', function($scope){


    $scope.project = [
        {
            name: 'Trello',
            desc: 'Project management app.',
            modules: [
                {
                    name: 'Trello1',
                    desc: '1st Trello'
                },
                {
                    name: 'Trello2',
                    desc: '2nd Trello'
                }            
            ]
        },
        {
            name: 'Straw Poll',
            desc: 'Poll creation app.',
            modules: [
                {
                    name: 'Straw Poll1',
                    desc: '1st Straw Poll'
                },
                {
                    name: 'Straw Poll2',
                    desc: '2nd Straw Poll'
                }            
            ]
        }    
    ];
}]);

<强> HTML

<div ng-app="myApp">

    <div ng-controller="DataController">

        <div>
            <ul>
                <li ng-repeat="proj in project">{{proj.name}}</li>  
            </ul>
        </div>

        <div>
            <ul>
                <li ng-repeat="mod in project | map: 'modules' | flatten">{{mod.name}}</li>
            </ul>
        </div>

    </div>

</div>

链接演示：https://jsfiddle.net/y4jh0ux7/

AngularJS如何将JSON解析为多个div？

1 个答案: