Question

还是AngularJS的新手，我正在努力添加一些bootstrap元素。我正在努力使用手风琴来提供过滤一组结果的类别（以及最终的子类别）。

我可能会将其移到自定义过滤器中（一旦我了解了更多信息），但试图让它同时运行。

更新：我认为它可能与范围和需要父访问权限有关。这里有什么帮助吗？

<tbody>
   <tr ng-repeat="product in products | filter:categoryFilter | filter:query |          limitTo: 20 | orderBy: 'Name'" >
    <td>{{product.Number}}</td>
    <td>{{product.Name}}</td>
  </tr>
</tbody>
</table>
</div>
</div>
</div>

<div id="sidebar">
<div id="box4"> 
    <div>
        <h2>Rental Categories</h2>
        <accordion close-others="oneAtATime">
        <accordion-group heading="All Equipment" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            <li><a href="#">All Equipment</a></li>
        </accordion-group>

        <-- NOT WORKING - EVEN WITH VALUE TYPED OUT -->
        <accordion-group ng-repeat="group in groups">
            <accordion-heading>
                {{group.title}} 
            </accordion-heading>
            <li ng-click="categoryFilter={Category: 'Concrete'}" ng-repeat="contents in group.content">
                <a href="">{{contents.name}}</a>
            </li>               
        </accordion-group>


        <--  PASSING VALUE STILL NOT WORKING  -->       
        <accordion-group heading="{{group.title}}" ng-repeat="group in groups" ng-click="categoryFilter={Category: '{{group.title}};}">
            <li ng-click="categoryFilter={Category:'{{group.title}}'}" ng-repeat="contents in group.content">
                <a href="">{{contents.name}}</a>
            </li>
        </accordion-group>
    </accordion>
</div>


<--   THIS WORKS - BUT IT IS NOT ACCORDION STYLE OR WITH A REPEAT FOR CATEGORIES -->                                
<div class="content">
    <ul class="style2">
        <li class = "first" ng-click="panel.selectTab(1); categoryFilter=''" ng-class="{ active:panel.isSelected(1) }"> 
            <a href="">All Equipment</a>
        </li>
        <li ng-click="categoryFilter={Category: 'Concrete'}">
            <a href="">Concrete &amp; Masonry</a>
        </li>
        <li ng-click="panel.selectTab(2); categoryFilter={Category: 'Concrete'}" ng-class="{ active:panel.isSelected(2) }">
            <a href="">Concrete &amp; Masonry</a>
        </li>
        <li ng-click="panel.selectTab(3); categoryFilter={Category: 'Drills & Hammers'}" ng-class="{ active:panel.isSelected(3) }">
            <a href="">Drills &amp; Hammers</a>
        </li>

我的组在控制器中被引用如下：

$scope.groups = [
{
  title: 'Concrete',
  content: [
    {id:1, name:'Grinders'},
    {id:2, name:'Polishers'},
    {id:3, name:'Tools'}
  ]
},
{
  title: 'Drills & Hammers',
  content: [
    {id:1, name:'Dynamic Group Body - 1'}
  ]
},
{
  title: 'Floor Mainentance',
  content: [
    {id:1, name:'Dynamic Group Body - 1'}
  ]
}];

我确保我的group.title与我的product.Category匹配。关于为什么没有在这个结构中传递这个过滤器的任何建议，将不胜感激。

Answer 1

将jsfiddle或plunker包含在您的代码中可能会有所帮助，这样我们就能看到您实际尝试的内容。根据我收集的内容，我创建了this jsfiddle。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" ng-controller="myController">
    <div class="panel panel-default" ng-repeat="group in groups">
        <div class="panel-heading" role="tab" id="heading_{{$index}}">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse_{{$index}}" aria-expanded="false" aria-controls="collapse_{{$index}}">
                    {{group.title}}
                </a>
            </h4>

        </div>
    <div id="collapse_{{$index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading_{{$index}}">
        <div class="panel-body">
            <ul>
                <li ng-repeat="content in group.content">{{content.name}}</li>
            </ul>
        </div>
    </div>
</div>

如果这不是您要完成的任务，请详细说明您要完成的工作并提供更多代码。感谢。

我在使用/ ng-repeat的手风琴中使用ng-click时遇到问题

1 个答案: