如何使用Angularjs 1.6在同一页面中显示动态内容？

Question

我是Angular的新手.我需要使用AngularJS 1.6从JSON文件渲染动态内容.这就是我所拥有的.

News.json

   {
  "Articles": [
    {
      "Title": "News 1",    
      "Abstract": "News 1 abstract ...",
      "Body": "News 1 starts here.... ",
      "Comments": [
        {
          "comment 1" : "Comment 1 goes here",
          "comment 2" : "Comment 2 goes here",
          "comment 3" : "Comment 3 goes here"
        }]
    },

    {
      "Title": "News 2",
      "Abstract": "News 2 abstract ... ",
      "Body": "News 2 starts here...",
      "Comments": [
        {
          "comment 1" : "Comment 1 goes here",
          "comment 2" : "Comment 2 goes here"
        }]
    }    
  ]
}

的script.js

app.config(function ($routeProvider) {
    $routeProvider
        .when("/News", {
            templateUrl: "NewsViewer.html",
            controller: "showNews"
        });
});

app.controller("showNews", ["$scope", "$http", function ($scope, $http) {
    $http({
        method: 'GET',
        url: 'News/News.json'
    }).then(function success(data) {
        $scope.News = data.data;
    });
}]);

News.html

<div class="container-fluid">

    <div class="row">

        <div class="col-md-offset-1 col-md-6">
            <div ng-controller="NewsRendering">
                <div ng-repeat="NewsData in News.Articles">
                    <h3>{{NewsData.Title}}</h3>
                    <p>{{NewsData.Abstract}}</p>
                    <a data-ng-href="/AngularTask/NewsViewer.html">more</a>
                </div>
            </div>
        </div>

        <div class="col-md-4 questionnaire">
            <h3>Questionnaire of the day</h3>
        </div>

    </div>

</div>

NewsViewer.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-1 col-md-6">
            <div ng-controller="showNews">
                <div>
                    <h3>{{News.Articles[0].Title}}</h3>
                    <p>{{News.Articles[0].Abstract}}</p>
                    <p>{{News.Articles[0].Body}}</p>
                </div>

                <div class="comments">
                    <h4>Comments</h4>
                    <hr>
                    <p>{{News.Articles[0].Comments[0]}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

此代码工作正常,但此代码不是动态的.我的问题如何使其动态,并可以在json文件中显示任何内容.我应该在JS代码中做什么来传递JSON文件数组的索引.

如您所见,<h3>{{News.Articles[0].Title}}</h3>仅显示JSON文件的第一个标题.我需要写它<h3>{{News.Articles[index of whatever].Title}}</h3>

注意:News.json有大约100,000条记录.我做了两个,只是为了显示代码并描述问题.

Answer 1

您需要结合使用路由服务和 rootScope 来保存所选对象。我给你做了一个简单的例子：

angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/list', {
            templateUrl: 'pages/list.html',
            controller: 'listController'
        })
        .when('/details', {
            templateUrl : 'pages/details.html',
            controller: 'displayController'
        })
        .otherwise({redirectTo: '/list'});
}])
.controller('listController', function($scope, $rootScope) {
    var myObject = {
        Listoflinks: [{
            "Title": "Link 1",
            "Abstract": "abstract is here ....",
            "Body": "Body is here ...",
        },
        {
            "Title": "Link 1",
            "Abstract": "abstract is here ....",
            "Body": "Body is here ...",
        }]
    }
    $rootScope.detail = myObject.Listoflinks[0];
})
.controller('displayController', function($scope, $rootScope) {
    $scope.detail = $rootScope.detail;
});

https://plnkr.co/edit/0SYnFcjlgGyT​​owlcpvgz?p=catalogue