javascript - 根据 Angular 中的 Ng-Repeat 中当前选定的菜单项显示元素

Question

我的应用程序中有一个导航栏，我想在单击时显示与所选导航项图像相关的内容。导航项和图像都位于 Controller 中的同一对象数组中，但是我不知道如何实现我想要的。您能否查看下面的代码并引导我找到合适的解决方案？

HTML

<ul id="nav-items">
    <li ng-repeat="n in coreCtrl.navItems">{{n.title}}</li>
</ul>

<ul id="backgrounds">
    <li ng-repeat="i in coreCtrl.navItems" ng-show"some-expression">
        <img ng-src="{{i.bgUrl}}" />
    </li>
</ul>

Angular 控制

self.navItems = [
     { title: 'item1', bgUrl: 'img1.jpg' }
   , { title: 'item2', bgUrl: 'img2.jpg' }
   , { title: 'item3', bgUrl: 'img3.jpg' }
   , { title: 'item4', bgUrl: 'img4.jpg' }
   , { title: 'item5', bgUrl: 'img5.jpg' }
];

Answer 1

好吧，首先我们需要在点击标题时进行更改。所以让我们添加一个 ng-click

<ul id="nav-items">
  <li ng-repeat="n in coreCtrl.navItems" 
      ng-click="coreCtrl.selectedItem=n">{{n.title}}</li>
</ul>

然后，如果该项目是 selectedItem，我们将显示图像。

<ul id="backgrounds">
    <li ng-repeat="i in coreCtrl.navItems" ng-show"i===coreCtrl.selectedItem">
        <img ng-src="{{i.bgUrl}}" />
    </li>
</ul>

// Set default selected item in your controller.
self.selectedItem = self.navItems[0];

这种情况下的另一个非常常见的模式是向菜单项添加事件类:

<ul id="nav-items">
  <li ng-repeat="n in coreCtrl.navItems" 
      ng-click="coreCtrl.selectedItem=n"
      ng-class="{'active':coreCtrl.selectedItem===n}">
    {{n.title}}
  </li>
</ul>