javascript - AngularJS 根据条件改变 <li> 元素标签

Question

我有一个列表，其中每个列表元素可以有不同的样式。简单 HTML看起来像这样:

<li class="active"><a href="[link]">One</a></li>
<li><a href="[link]">Two</a></li>    

当用户点击 two然后我希望事件元素移动到该列表项。我尝试了以下解决方案。

// In my menu controller

// Determines which link that should be active
$scope.activeLinkID = 0;

// Associative array with link names and paths
$scope.linkArray = {};

// Index 0 = linkName, index 1 = linkPath
$scope.linkArray[0] = ["One", "#/link/one"]
$scope.linkArray[1] = ["Two", "#/link/two"]
[...]

我试过这样在我的 View 中显示它:

<li ng-repeat="(linkIndex, link) in linkArray | orderBy:linkIndex"><a href="{{link[1]}}">{{link[0]}}</a></li>

但是我在尝试将元素添加到我的 <li> 时卡住了标签。条件是 activeLinkID == linkIndex然后添加 class="active"。

我不确定使用 AngularJS 实现此目标的最佳方法是什么？ .最好的方法是什么？

Answer 1

在你的 Controller 中

$scope.selectedIndex = -1;
$scope.links = [
  ["One", "#/link/one"],
  ["Two", "#/link/two"]
];

在你看来

<li ng-repeat="link in link" 
    ng-class="{'active': $parent.selectedIndex == $index}">
      <a ng-click="$parent.selectedIndex = $index">{{link[0]}}</a>
</li>

这是一个工作演示 http://jsbin.com/exafUmuq/2/edit?html,js,output

您似乎正在尝试完成 ui-router 的事情是为了解决而建立的。您应该花一些时间来了解它，它会让您省去很多麻烦。

可以在这里找到有关 ui-router 的精彩视频
https://egghead.io/lessons/angularjs-introduction-ui-router