javascript - AngularJS ng-repeat 在单独的 View 中显示内容

标签 javascript html angularjs angularjs-ng-repeat

我正在开发一个基本的新闻提要应用程序。我需要的是特定新闻文章 entry.content 在单击后显示在单独的 View 中。两个 Controller 都可以访问数据,但我需要一个同步的点击事件,以便第二个 Controller 知道要显示哪篇特定文章。我已经为此工作了一段时间,但无法在谷歌或此处找到涉及辅助 View 的相关链接。我需要一个单独的 View b/c 我必须向该页面添加更多的 HTML 并最终在文章之间单击(上一个/下一个)。我有一个例子,它在点击事件发生的地方工作,但内容显示在当前 View 中,然后在点击后隐藏。

我有一个 Plunker:http://plnkr.co/edit/lk66pRb7A6DkGM7NQKF7?p=preview

这是 index.html 代码:

<body ng-app="FeedApp">
  <h1>News Feed</h1>
  <div ng-controller="NewsCtrl">

    <div id="main">
    <div ng-view=""><!-- angular yield --></div>
    </div> <!-- main -->

  </div> <!-- NewsCtrl -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
</body> <!-- FeedApp -->

这是 home.html 代码:

<div ng-repeat="new in news">
  <h3 ng-repeat="entry in new.entries" ng-if="$index < 3">
    {{entry.title}}
    </br>
        <a href="#/" ng-click="show = !show">Display this story</a></br>
        <a href="#/article" target="_self" ng-click="show = !show">Desired: click this Link, go to #/article & display this story</a>
        <p class="news-entries" ng-show="show" ng-bind-html="TrustSnippet(entry.content)"></p>
 </h3>
</div> <!-- new in news -->

目前,在 article.html 文件中我只有一个后退按钮,因为我不确定该放什么。所有其他代码都在 Plunker 中,但如果有帮助,我可以在此处添加。

我在想这可能会使用当前的 $index 值来解决,但我现在还不知道。 感谢您的帮助。

最佳答案

您可能只想像这样使用 $routeParams:

这是一个 Plunker

路线

.when("/article/:articleId", { . . 

链接

<a href="#/article/{{$index}}"  . . .

参数

FeedApp.controller("ArticlesCtrl", ["$scope", "$routeParams", '$http',
  function($scope, $routeParams, $http) {
    var index = $routeParams.articleId;

文章对象

$scope.article = $scope.news[0].entries[index];

我会完全省略 entries 位,我可能会使用工厂来管理/维护数据。

关于javascript - AngularJS ng-repeat 在单独的 View 中显示内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27465159/

相关文章:

javascript - 跨路线持久模型和 View 的设计模式

javascript - HTML/JS 多饼图问题

php - 从具有不同大小图像的 css 图像 Sprite 中检索图像

javascript - 原型(prototype)函数调用和绑定(bind)

javascript - 我想从我的 json 文件中获取一个值

angularjs - 用@ 定义的隔离作用域属性在指令的链接函数中未定义/消失

javascript - 变量 $http 未定义

javascript - 由于 AngularJS 的 IE 缓存,我必须单击两次才能添加/删除项目

javascript - promisify 来自 adal-node 的 acquireTokenWithClientCredentials 函数

javascript - 在 jQuery 中使用 "id"更改特定 "this"的 CSS