Javascript 显示基于当前选定菜单项的元素，并在角度方向重复Ng

我在应用程序中有一个导航栏，我想在单击时显示与选定导航项目图像相关的内容。导航项和图像都位于控制器中的同一个对象数组中，但我不知道如何实现我想要的。请检查下面的代码，并引导我找到合适的解决方案，好吗

HTML

---

好的，首先我们需要在单击标题时进行更改。因此，让我们添加一个ng单击

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

{{n.title}

然后，如果项目是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];

//在控制器中设置默认选定项。
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>

{{n.title}}

好的，首先我们需要在单击标题时进行更改。因此，让我们添加一个ng单击

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

{{n.title}

然后，如果项目是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];

//在控制器中设置默认选定项。
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>

{{n.title}}

试着让它简单得多：

HTML

---

试着让它变得更简单：

HTML

---

万分感谢：）非常好用！为什么背景项有ng repeat，它必须是简单的li或div，我们不需要加载所有图像，直到用户选择Ali所指的是，您可以使用

而无需ng repeat。我这样做是为了尽量减少对相关代码的更改。（另外，如果你想在使用前加载图像与否是主观的，但我承认可能有更好的方法来预加载图像。）万分感谢：）效果非常好！为什么背景项有ng repeat，它必须是简单的li或div，我们不需要加载所有图像，直到用户选择Ali所指的是，您可以使用

而无需ng repeat。我这样做是为了尽量减少对相关代码的更改。（另外，如果您想在使用前加载图像或不加载图像是主观的，但我承认可能有更好的方法来预加载图像。）

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' }
];