Angularjs列表和详细信息视图

发布时间：2020-12-17 17:59:35 所属栏目：安全来源：网络整理

导读：这是我的基本情景.对于项目列表(摘要视图),我想显示在同一页面上单击的项目的详细信息视图. 我把这个jsfiddle example转换成了这个jsfiddle.如果你看一下这个行为它第一次起作用但是它不一致. 也许有人可以帮助我,或建议一个更好的方法.我想有一个不同的控制

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

我把这个jsfiddle example转换成了这个jsfiddle.如果你看一下这个行为它第一次起作用但是它不一致.

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

解决方法

转换示例的一种方法(假设您要使用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范围内创建的项目(因此在ngRepeat之外不可用),因此您的jsFiddle无效.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!