Angularjs列表和详细视图 [英] Angularjs list and detail view

问题描述

这是我的基本情况。对于项目的列表（摘要视图）我想说明得到了点击同一页面上该项目的详细信息视图。

this is my basic scenario. For a list of items (summary view) i want to show details view of item that got clicked on the same page.

我把这个的jsfiddle 例如并把它改造成这样的的jsfiddle 。如果你看的行为它的第一次工作，但它是不相符的。

I took this jsfiddle example and transformed it into this jsfiddle. If you look at the behavior it does work for first time but it is not consistent.

也许有人可以帮助我，或提出一个更好的办法。我想有管理列表和不同的控制器来处理的详细视图不同的控制器。

Maybe someone can help me with this, or suggest a better approach. I would like to have a different controller for managing the list and a different controller to handle the detail view.

推荐答案

转化的例子（前提是您要使用ngSwitch）的一个方法是：

One way of transforming the example (provided that you want to use ngSwitch) would be:

<ul ng-controller="ListController">
    <li ng-repeat="item in items" ng-controller="ItemController">
        <div ng-click="open(item)">{{item.content}}</div>        
    </li>
    <hr>
    <ng-switch on="anyItemOpen()">
     <div ng-switch-when="true">
         <div ng-controller="ItemController">
             {{opened.name}}: overlay: tweet, share, pin
         </div>  
         <a ng-click="close()">close</a>         
     </div>
    </ng-switch>   
</ul>

这里是工作的jsfiddle：<一href=\"http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/\">http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/

您的jsfiddle没有工作，因为你尝试引用项目在ngRepeat范围内创建（和​​ngRepeat的，因此不能外）。

Your jsFiddle didn't work since you were trying to reference item created in the ngRepeat scope (and thus not available outside of the ngRepeat).

这篇关于Angularjs列表和详细视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！