0

我目前有一个触发下拉内容的切换按钮列表。为了赋予这些按钮功能，我在控制器中有一个切换功能。我相信我的问题正在发生，因为这些按钮都共享相同的范围。当我单击打开一个按钮时，它们都会打开，当我关闭一个按钮时，它们都会关闭。

假设这是一个范围问题，我将如何给每个它们自己的范围，以便一次只能打开一个按钮？

谢谢！

我的标记：

<div ng-controller="MyController">
    <ul>
        <li ng-repeat="item in items">
            <a ng-click="toggle()">Drop Down</a>
            <ul ng-show="isVisible">
                <li ng-repeat="thing in things">
                    <a ng-href="{{something.url}}">{{something.text}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的控制器（相关部分）：

function NotificationController($scope) {

    // I toggle the value of isVisible.
    $scope.toggle = function() {
        $scope.isVisible = ! $scope.isVisible;
    };

    // Default the blocks to be visible.
    $scope.isVisible = false;

}
4

1 回答 1

3

ng-repeat已经为每个项目创建了一个新范围，但isVisible在父范围上定义，因此范围都回退到那个范围。

您可以为每个项目添加一个属性“isVisible”，并向 toggle() 添加一个索引参数，以便它知道要切换哪一个。例如：

<div ng-controller="MyController">
  <ul>
    <li ng-repeat="item in items">
        <a ng-click="toggle($index)">Drop Down</a>
        <ul ng-show="item.isVisible">
            <li ng-repeat="thing in things">
                <a ng-href="{{something.url}}">{{something.text}}</a>
            </li>
        </ul>
    </li>
  </ul>
</div>

控制器：

function NotificationController($scope) {

  // I toggle the value of isVisible.
  $scope.toggle = function(index) {
      $scope.items[index].isVisible = ! $scope.items[index].isVisible;
  };

  // Default the blocks to be visible.
  $scope.items.forEach(function(item) {
    item.isVisible = false;
  });

}
于 2013-05-01T22:33:22.563 回答