过滤离子手风琴列表

Question

我正在使用 Ionic 开发一个应用程序，有时我有一个手风琴列表显示职业名称及其专长，如下所示：

职业1
- 专长 1
- 专长 2
职业2
- 专长 3
- 专长 4

我只需要根据专业过滤此列表，如果可能的话，我希望保留所有组（具有与给定搜索值匹配的专业）在用户输入搜索框时显示.

这是我的观点：

<ion-view view-title="Specialty">
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" placeholder="Search Specialty" ng-model="seachSpecialty">
            </label>
        </div>

        <div class="list">
            <div ng-repeat="profession in professions">
                <div class="item item-icon-left"  ng-click="toggleGroup(profession)" ng-class="{active: isGroupShown(profession)}">
                    <i class="icon icon-accessory" ng-class="isGroupShown(profession) ? 'ion-chevron-up' : 'ion-chevron-down'"></i>
                    &nbsp;
                    {{profession.name}}
                </div>
                <div class="item item-icon-left item-accordion" ng-show="isGroupShown(profession)" ng-repeat="specialty in profession.specialties">
                    {{specialty.name}}
                </div>
            </div>
        </div>

    </ion-content>
</ion-view>

这是我的控制器：

    .controller('SpecialtyCtrl', function ($scope, $ionicHistory, $ionicLoading, DataSource) {

    $scope.professions = DataSource.getProfessions();

    $scope.toggleGroup = function (group) {
        if ($scope.isGroupShown(group)) {
            $scope.shownGroup = null;
        } else {
            $scope.shownGroup = group;
        }
    }

    $scope.isGroupShown = function (group) {
        return $scope.shownGroup === group;
    }
})

编辑：

这里是这个代码对应的plunker。

关于手风琴列表的所有内容都在工作（展开和折叠）。我的问题是如何在此列表中进行过滤器以仅过滤列表的 subitens（专业）？这个列表的自定义过滤器是什么样的？是否可以在过滤列表的同时保持组的展开？

Answer 1

诀窍是使用Angular filter:

首先注入过滤器，以便它可以在您的控制器中使用：

myApp.controller('SpecialtyCtrl', ['$scope', '$http', '$filter',
function($scope, $http, $filter) {

    var filter = $filter('filter');

然后你像这样扩展你的控制器逻辑：

    function hasMatchingSpecialities(group) {
        return $scope.searchSpecialty &&
            filter(group.specialties,
                {name: $scope.searchSpecialty}).length;
    }

    $scope.isGroupShown = function (group) {
        return $scope.shownGroup === group ||
            hasMatchingSpecialities(group);
    }

您的专业 ng-repeat 可以扩展为使用过滤器：

<div class="item item-icon-left item-accordion" ng-show="isGroupShown(profession)"
  ng-repeat="specialty in profession.specialties | filter: searchSpecialty">
                {{specialty.name}}
</div>

这是Plunkr。

过滤离子手风琴列表

Filter Ionic Accordion List

accordion

filter

angularjs

angularjs-filter

ionic