如何通过调用 is-open 属性中的函数保留组中最后打开的手风琴 [英] How to retain the last opened accordion in a group by invoking function in is-open attribute

问题描述

我有一个动态填充的手风琴.

I'm having accordion which is populated dynamically.

<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 属性中调用方法.

Here dataList keep on changing after 15 sec that means I'm populate dataList after regular inteval of 15sec. So i need to persist the last opened accordion group. DataList can be very hude. So i cant parse and modify it to avoid method invocation in is-open attribute.

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

In js file, 'm having following code.

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

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

When I'm running it, its giving javascript error.

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

上面的代码有什么问题?

What is wrong in above code?

推荐答案

你不能真正做到这一点，因为 angular 正在寻找一个它可以分配给的 2 路绑定变量.您可以通过在 ng-repeat 中使用 track by 轻松维护最后一次打开.这样一来，angular 就不会重新创建 DOM 元素，而只会更新现有元素的作用域，该作用域是根据您正在跟踪的内容来识别的.

You cannot really do that because angular is looking for a 2-way binding variable that it can assign to. You can easily maintain the last opened by using track by in your ng-repeat. With that what happens is angular will not recreate the DOM element, instead it will just update the existing element's scope which it identify based on what you are tracking by.

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

Here in the example i have an id for accordions so i am tracking it by id:-

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

Plnkr

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

By default if no track by provided angular will add a unique id $$hashKey for the repeated elements and since you are refreshing as a whole list it will remove the elements from DOM and recreate them. Using track by you will get better performance improvement as well. You can provide any unique key as trackby value (event dataName if it is unique).

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

In this example you can see that the last accordion is retained opened even if you refresh the data since the isOpen is added on the child scope of repeated element even if you refresh the data if will only update the data based on the id, it wont recreate the accordion.

这篇关于如何通过调用 is-open 属性中的函数保留组中最后打开的手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！