当过滤数组不为空时，以编程方式打开 Bootstrap UI 嵌套 Ng-Repeat 生成的手风琴

Question

我有一个 Bootstrap-UI 手风琴组，它使用 ng-repeat 生成单独的手风琴菜单。每个手风琴下的内容也是使用嵌套的 ng-repeat 生成的。

<accordion close-others="false">
        <span data-ng-repeat="category in categories">
            <accordion-group is-open="filterText.length > 0">
                <accordion-heading>{{category}}: {{reportList.length}} Items </accordion-heading>
                <div>
                    <ul>
                        <li data-ng-repeat="report in reportList = (getReports($parent.$index) | filter: filterText)">{{report}}</li>
                    </ul>
                </div>
            </accordion-group>
        </span>
    </accordion>

第二个ng-repeat生成的内容需要可搜索。执行搜索时，包含匹配值的手风琴应该打开并显示匹配值。我知道外部 ng-repeat 会看到过滤后的数组及其长度，因为我可以在视图中显示长度值（即 {{reportList.length}} 在过滤器执行时更新）。

当我尝试将 reportList.length 值放入 <accordion-group> 的 is-open 属性时，问题就来了。使用 is-open="reportList.length" 似乎将文字传递到指令中。无奈之下，我尝试使用 is-open="{{reportList.length}}" 但这会引发预期的语法错误。

这是一个 plunker，它显示了我的工作以及注释掉的行，这些行显示了我认为它应该工作的方式（第 22 和 23 行）。任何建议都非常受欢迎。

Answer 1

您的绑定在 ng-repeat 内部是开放的，它为每个项目（类别）创建一个子范围。您需要绑定到 $parent.filterText.length，因为 filterText 不是类别属性.

Answer 2

您将 is-open 绑定到的内容，Angular 需要能够分配给它，而不仅仅是计算它。它可以评估像 "foo == 5" 这样的表达式，但它不能分配给它。

我做的是创建一个变量并绑定到它，然后手风琴可以改变它，我也可以改变它，大家都很高兴。

$scope.accordionSettings = {
IsOpen: {
    Section1: true,
    Section2: false
}};

在标记中：

<div uib-accordion-group is-open="accordionSettings.IsOpen.Section1">
   ...  more markup ...
<div uib-accordion-group is-open="accordionSettings.IsOpen.Section2">

当过滤数组不为空时，以编程方式打开 Bootstrap UI 嵌套 Ng-Repeat 生成的手风琴

Programmatically Open Bootstrap UI Accordion Generated by Nested Ng-Repeat when Filtered Array is Not Empty

angularjs

angular-ui-bootstrap