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

Question

我对 Angular 还很陌生，所以如果这个问题已经得到解答，我深表歉意，但当我看到它的其他用途时，我只是无法弄清楚。

我使用 REST API 来简单地从外部 URL 获取一些新闻文章，并将它们很好地打印在新闻列表页面上。

<强> 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;
        });
    });

新闻列表.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>

我想要的是，对于新闻列表中的每篇新闻文章，我都可以单击它来查看更多详细信息，这样我就会有一个文章详细信息页面，该页面需要某种独特的信息标识符并使​​用它来提取所有数据。

请记住，文章的 JSON 响应不包含任何类型的唯一 ID，如何实现这一目标？

Answer 1

在你的 ng-repeat 里面有一个 Angular 变量:$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>