Question

我有一个用户列表，当我点击列表项时，我希望子部分从它下面向下滑动。我对动画很好，这不是我需要帮助的领域。我的问题是，当我点击任何列表项时，所有下拉部分都显示在所有列表项下面。

所以我现在的方法是使用每个用户的id来创建一个唯一的ng-show。然后当我点击列表项时，会调用一个函数：

<ul id="users" ng-repeat="user in users">
    <li ng-click="showUserDetail(user.id)">
        {{user.name}}
        <div class="slide" ng-show="dropDownSection_{{user.id}}">
            //Stuff will go here
        </div>
    </li>
</ul>

showUserDetail功能是：

$scope.showUserDetail = function(id) {
    //not sure I can do this?
    var section = "dropDownSection" + "_" + id;
    $scope.section = true; //this would normally show the animation
}

但这不起作用 - 下拉列表不会出现。

是否有一种很好的“角度”方式来实现这样的目标？

Answer 1

你可以做的是..设置要在ng-click上显示的id并在ng-show中检查该id

ng-click="idToDisplay = user.id"

和

ng-show="idToDisplay == user.id"

Answer 2

您可以通过示波器上的变量跟踪当前显示详细信息的用户。单击用户时设置此变量。

$scope.userDetailId = 0; 
$scope.showUserDetail = function (id) {
    $scope.userDetailId = id;
}

然后，在ng-repeat部分中，您可以检查当前用户的ID是否与跟踪的ID匹配：

<ul id="users" ng-repeat="user in users">
  <li ng-click="showUserDetail(user.id)">
    {{user.name}}
    <div class="slide" ng-show="userDetailId == user.id">
      //Stuff will go here
    </div>
  </li>
</ul>

检查此Plunker以获取演示。

动态命名ng-show

2 个答案: