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"]
[...]

我试图在我看来这样显示：

<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

在您的控制器中

$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

Answer 2

尝试在div中添加div ng函数，就像这样

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

看看是否有效。为我做了

AngularJS根据条件</li>更改<li>元素标签

2 个答案: