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

时间：2017-11-09 22:20:17

标签： javascript html angularjs json

我是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条记录。我做了两个，只是为了显示代码并描述问题。

6 个答案:

答案 0 :(得分：3)

我认为你需要的是使用＆＃39; ng-repeat＆＃39;显示数组文章和＆＃39; $ http.get（）＆＃39;加载json.file＆＃34;动态＆＃34;如你所愿。

答案 1 :(得分：2)

您需要将路由服务与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/0SYnFcjlgGyTowlcpvgz?p=catalogue

答案 2 :(得分：2)

您可以将新闻索引传递到/News路径。

首先，更改News.html，以便按索引跟踪数据，然后将项目的索引附加到ng-href。

<div ng-repeat="NewsData in News.Articles track by $index">
  <h3>{{NewsData.Title}}</h3>
  <p>{{NewsData.Abstract}}</p>
  <a data-ng-href="/AngularTask/NewsViewer.html?index={{$index}}">more</a>
</div>

现在，对于每次访问，您都会在NewsViewer路由中看到一个新的查询参数，该参数将为index。

其次，更改控制器，因此它使用$routeParams传递索引的优势。

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

这样，$scope.News将包含驻留在传递索引上的文章。

最后，更改NewsViewer.html，以便它使用$scope.News。

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

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

对于评论，您可以再次使用ng-repeat指令显示所有评论，逐个迭代。

希望这能回答你的问题。

答案 3 :(得分：2)

根据您的代码进行的观察很少：

  1. 这行代码<a data-ng-href="/AngularTask/NewsViewer.html">more</a>将破坏AngularJS的作用，即单页面应用程序 (SPA) 。
  2. 使用ui-router代替ngRoute，以便在ngRoute过时时更好。
  3. 不是直接将用户重定向到html模板（/AngularTask/NewsViewer.html），而是使用ui-sref使用params更改视图的状态，并将$index作为参数值传递

    4. 根据预期尝试以下方法获取结果：

    <强> News.html 

      <div ng-repeat="NewsData in News.Articles">
    <h3>{{NewsData.Title}}</h3>
    <p>{{NewsData.Abstract}}</p>
    <a href="javascript:void(0)" ui-sref="newsdetails({index: $index})">more</a>
  </div>

    routes.js： 

    $stateProvider
    .state('newsdetails', {
      url: '/news-details/:index',
      controller: 'showNews',
      templateUrl: 'NewsViewer.html'
    })
    ....

    控制器： 

    .controller('showNews', function($scope, $stateParams) {
    $scope.indexVal = $stateParams.index; // getting index value passed from news.html
});

    NewsViewer.html： 

     <div ng-controller="showNews">
     <div>
         <h3>{{News.Articles[indexVal].Title}}</h3>
         <p>{{News.Articles[indexVal].Abstract}}</p>
         <p>{{News.Articles[indexVal].Body}}</p>
     </div>
 </div>

    工作演示： https://plnkr.co/edit/jfzm00ksZMAC8sGGUZSR?p=preview

答案 4 :(得分：-1)

我认为这就是你想要的

<强> NewsViewer.html 

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

                    <div class="comments">
                        <h4>Comments</h4>
                        <hr>
                        <div ng-repeat="comment in selectedArticle.Comments">
                            <p ng-repeat="(key, value) in comment">
                                <strong>{{key}}</strong>: {{value}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

答案 5 :(得分：-1)

请找到下面的工作解决方案

https://embed.plnkr.co/rbNAcVGtBvTjl9VhfFAl/

如果您需要进一步的信息，请告诉我。享受：）

<强>被修改

首先，我们需要定义两条不同的路线，一条用于新闻，另一条用于文章

$routeProvider.when("/News", {
    templateUrl: "News.html",
    controller: "NewsContoller"
}).when("/NewsViewer", {
    templateUrl: "NewsViewer.html",
    controller: "NewsViewerController"
})

如您所见，每个路线都有两个独立的控制器。

然后我们需要一个值服务来在路由之间传递数据

angular.module('app').value('viewData', {})

点击更多链接后，将viewData的值设置为该特定文章，然后重定向到/NewsViewer路由。并且，在NewsViewerController上从viewData检索该值并将其传递给$scope。

模板：News.html 

<div>
  <div ng-repeat="NewsData in News.Articles">
    <h3>{{NewsData.Title}}</h3>
    <p>{{NewsData.Abstract}}</p>
    <a href ng-click="showArticle(NewsData)">more</a>
  </div>
</div>

模板：NewsViewer.html 

<div>
  <div>
    <h3>{{Article.Title}}</h3>
    <p>{{Article.Abstract}}</p>
    <p>{{Article.Body}}</p>
  </div>

  <div class="comments">
    <h4>Comments</h4>
    <hr>
    <p ng-repeat="(key, value) in Article.Comments[0]">
      {{value}}
    </p>
  </div>
</div>
<a ng-href="#!/News">All News</a>

控制器：NewsController 

angular.module('app').controller('NewsContoller', function($scope, $http, viewData, $location) {
  $http({
    method: 'GET',
    url: 'News.json'
  }).then(function success(response) {
    $scope.News = response.data;
  });
  $scope.showArticle = function(article) {
    viewData.article = article;
    $location.path("/NewsViewer");
  }
})

控制器：NewsViewerController 

angular.module('app').controller('NewsViewerController', function($scope, viewData) {
  $scope.Article = viewData.article;
})

在原始答案中，plunker的链接在上面。

相关问题
最新问题