Question

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

假设这是一个范围问题，我该如何为每个范围提供自己的范围，以便一次只打开一个按钮？

谢谢！

我的标记：

<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;

}

Answer 1

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;
  });

}

AngularJS-防止打开所有按钮实例

1 个答案: