Angularjs列表和详细信息视图

时间:2012-09-18 02:49:57

标签: angularjs

这是我的基本情景。对于项目列表(摘要视图),我想显示在同一页面上点击的项目的详细信息视图。

我接受了这个jsfiddle example并将其转换为此jsfiddle。如果你看一下它首次运作的行为,但它并不一致。

也许有人可以帮助我,或建议更好的方法。我想有一个不同的控制器来管理列表和一个不同的控制器来处理详细信息视图。

1 个答案:

答案 0 :(得分:12)

转换示例的一种方法(假设您要使用ngSwitch)将是:

<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:http://jsfiddle.net/pkozlowski_opensource/sJdzt/4/

由于您尝试引用在ngRepeat范围内创建的item(因此无法在ngRepeat之外使用),因此您的jsFiddle无效。