如何通过调用 is-open 属性中的函数来保留组中最后打开的手风琴

Question

我正在使用动态填充的手风琴。

<accordion-group ng-repeat="data in dataList" is-open="isAccordionOpen(data.dataName)">
            <accordion-heading> 
                <span ng-click="openedAccordionGroup(data.dataName)" class="accordionSpan"><b>{{data.dataName}}</b>
                </span>
            </accordion-heading>
</accordion-group>

这里 dataList 在 15 秒后继续变化，这意味着我在 15 秒的常规间隔后填充 dataList。所以我需要坚持最后一个打开的手风琴组。 DataList 可能非常庞大。所以我无法解析和修改它以避免在 is-open 属性中调用方法。

在 js 文件中，有以下代码。

$scope.openedAccordionName = '';
        $scope.isAccordionOpen = function(name){
            return  $scope.openedAccordionName === name;
        };
        $scope.openedAccordionGroup = function(name) {
            $scope.openedAccordionName = name;
        };

当我运行它时，它给出了 javascript 错误。

Error: [$compile:nonassign] Expression 'isAccordionOpen(data.dataName)' used with directive 'accordionGroup' is non-assignable!

上面的代码有什么问题？

Answer 1

您不能真正做到这一点，因为 Angular 正在寻找它可以分配的 2 路绑定变量。您可以在 ng-repeat 中使用 track by 轻松维护上次打开的文件。随之发生的事情是 Angular 不会重新创建 DOM 元素，而是只会根据您跟踪的内容更新现有元素的范围。

在这个例子中，我有一个手风琴的 id，所以我通过 id 来跟踪它：-

<accordion-group ng-repeat="data in dataList  track by data.id" is-open="isOpen">

Plnkr

默认情况下，如果提供的角度没有跟踪，将为重复的元素添加一个唯一的 id $$hashKey，并且由于您正在刷新整个列表，因此它将从 DOM 中删除元素并重新创建它们。使用 track by 你也会得到更好的性能提升。您可以提供任何唯一键作为 trackby 值（如果它是唯一的，则事件 dataName）。

在此示例中，您可以看到，即使您刷新数据，最后一个手风琴仍保持打开状态，因为 isOpen 已添加到重复元素的子范围内，即使您刷新数据 if 只会根据以下条件更新数据id，它不会重新创建手风琴。