2015-04-04 37 views
0

AngularJS仍然是新手,並且正在努力添加一些引導程序元素。我正在使用手風琴來提供將過濾一組結果的類別(最終子類別)。我在使用ng-click在手風琴中使用ng時遇到了問題w/ng-repeat

我可能會把它移入一個自定義過濾器(一旦我瞭解了更多的信息),但試圖讓這個工作在同一時間。

更新:我想這可能與範圍和需要家長訪問。這裏有幫助嗎?

$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匹配:

<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> 

我的組在控制器如下引用。任何意見,爲什麼這個過濾器沒有被通過這個結構,將不勝感激。

回答

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> 

如果這不是你想實現什麼,請詳細說明您所要完成,並提供更多的代碼是什麼一點。謝謝。