的 Link for results

（您可以在控制台中看到JSON的输出）

返回的JSON看起来像这样（只显示一组）：

   [
     {
        "author":"Napier Lopez",
        "title":"Report: First real Samsung Galaxy S8 photo and release date leaked",
        "description":"Ever-reliable leaker Evan Blass of Venture Beat has just given us our best look at Samsung’s Galaxy S8 yet. The report confirms several of the details we’ve already learned about the device, as well as providing an announcement and release date. Blass confirms that the devices are foregoing the front fingerprint scanner for one place on …",
        "url":"https://thenextweb.com/mobile/2017/01/26/report-first-real-samsung-galaxy-s8-photo-release-date-leaked/",
        "urlToImage":"https://cdn3.tnwcdn.com/wp-content/blogs.dir/1/files/2017/01/Samsung-Galaxy-S8-Blur-not-real.jpg",
        "publishedAt":"2017-01-26T22:13:13Z"
     } ...
  ]

以下是我打印每篇新闻文章的方式：

app.js：

/* Newsfeed API Call */
var app = angular.module('newsFeed', [])
    .controller('Newsfeed', function($scope, $http) {
        $http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey=6ddf8d3cc8a54cc0abf89ad7d685da54').
        then(function(response) {
            $scope.news = response.data;
        });
    });

新闻listing.html：

<div class="container" ng-controller="Newsfeed">
  <br/>
  <form>
    <div class="col-md-6">
      <h2>Newsfeed</h2>
      <br/>
      <div class="form-group">
        <input type="text" class="form-control" ng-model="searchText" name="search-news" id="search-news" placeholder="Search for news">
      </div>

      <div class="form-group">
        <select class="custom-select" ng-model="selectedAuthor" ng-options="n.author for n in news.articles | unique: 'author'">
          <option ng-click="selectedAuthor = undefined" value="">Filter by Author</option>
        </select>
      </div>
    </div>
  </form>


  <div>
    <div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:selectedAuthor">
      <img class="card-img-top img-responsive" src="{{n.urlToImage}}" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">{{n.title | cut:true:50:' ...'}}</h4>
        <p class="card-text"> {{n.author}} <small>on {{ formatDate(n.publishedAt) |  date:'MM/dd/yyyy'}}</small> </p>
        <p class="card-text"> {{n.description | cut:true:100:' ...'}}</p>

        <a class="btn btn-primary" href="#" role="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
        <a class="btn btn-danger" href="#" role="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
      </div>
    </div>
  </div>
</div>

我想要的是，对于news-listing中的每篇新闻文章，我可以点击它来查看更多详细信息，因此我会有一个文章详细信息页面，它将采用某种唯一标识符并将其用于拉出所有数据。

如何记住JSON中文章中的响应不包含任何类型的唯一ID？

Answer 1

在ng-repeat内部有一个角度变量：$index，它为您提供数组中元素的位置（news.articles）。您可以使用它来访问数组中的 n 元素。

所以，你会有一个函数，你可以这样调用查看按钮：

$scope.view = function (idx){
    //get the n-esim article inside the array like something like
    var element = $scope.news[idx] //and do some stuff with element
}

...在你看来，你会有像

这样的东西

<div class="card" style="width: 20rem;" ng-repeat="n in news.articles | filter:searchText | filter:selectedAuthor">
      <!--...-->
      <a class="btn btn-primary" role="button" ng-click="view($index)">Details</a>
      <!--...-->
        <a class="btn btn-primary" href="#" role="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></a>
        <a class="btn btn-danger" href="#" role="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></a>
      </div>
    </div>

Angular.js点击进入项目详细信息页面

的 Link for results

1 个答案: