引導+ AngularJS：自定義菜單行爲

Question

編輯：添加的jsfiddle

我試圖建立一個菜單或設置的，其（動態）的詳細信息從服務器請求來選擇。數據看起來是這樣的（不必要的數據被隱藏）：

{ 
    "name" : "root", 
    "subOptions" : [{ 
      "name" : "A", 
      "subOptions" : [{ 
        "name" : "A1", 
       }, { 
        "name" : "B1", 
       }, { 
        "name" : "B3", 
       }, { 
        "name" : "B4", 
       }, { 
        "name" : "B5", 
       } 
      ] 
     }, { 
      "name" : "B", 
      "subOptions" : [] 
     }, { 
      "name" : "C", 
      "subOptions" : [{ 
        "name" : "C1", 
       }, { 
        "name" : "C1", 
       }, { 
        "name" : "C3", 
       } 
      ] 
     } 
    ] 
} 

使用引導3格，我只是告訴多少列這些元素應該有，我不擔心這裏的/時候會打破以下列出的其餘元素。我的問題是與子選項，這應該在一個新行立即其父下面介紹有關：

當點擊「C」元素，它應該顯示它下面的子選項。同樣的情況應該發生（例如）J元素的子選項在其下面顯示。 如果這個網格對於每行6個元素是固定的，我可能會告訴每個父母在哪裏以及它們中的每一個的子選項應該在哪裏顯示，但是這個網格必須是響應式的，這意味着在某個點它每行有4個，3個或2個元素。

有了這些變量，我無法管理的預期行爲。

我採用了棱角分明NG-重複遍歷選項：

<div> 
    <div class="row"> 
     <div ng-repeat="option in object.options"> 
      <div class="container col-lg-4 col-md-4 col-sm-6 col-ms-8 col-xs-12"> 
       <div ng-click="selectOption(option)"> 
        <div class="name"><span>{{option.name}}</span></div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-4 col-md-4 col-sm-4 col-ms-4 col-xs-4" ng-repeat="option in activeOption.suboptions"> 
       <button class="btn btn-lg" ng-click="selectSuboption(option)">{{ ::option.name }}</button> 
      </div> 
     </div> 
    </div> 
</div> 

這樣，子選項會一直出現在所有的底部，這是不期望的行爲。所以，這裏的問題是：

• 是否可以儘可能動態地達到這個效果？
• 我怎樣才能打破容器「注入」行？

對不起，很長的文章，但我試圖提供儘可能多的信息，因爲我可以解決一個問題，一直在消耗我幾天，現在似乎無法找到答案它。

這裏有一個的jsfiddle我目前的執行情況：https://jsfiddle.net/w5xrjhmd/6/

Answer 1

隨着出花太多時間與造型這是我想出了爲你的問題的解決方案。我希望它能幫助

這它codepen http://codepen.io/anon/pen/oXNRzZ?editors=101

<div ng-app="myAppModule" ng-controller="MyController"> 
    <div class="panel-body"> 
    <div class="list-group" ng-repeat="s in data"> 
     <a href="#" class="list-group-item" ng-class="{active: isActive(s)}" ng-click="select(s); showMe = !showMe">{{s.code}}</a> 
     <a href="#" ng-show="showMe" ng-repeat="o in s.subOptions" class="btn btn-sm">{{o.code}}</a> 
    </div> 
    </div> 
</div> 

這只是我不包括數據集或控制器的結構，我沒有做任何更改

$scope.select = function(i) { 
    $scope.selected = i; 
    }; 
    $scope.isActive = function(item) { 
    return $scope.selected === item; 
    }; 

的AngularJS這是HTML在你的造型中使用它。我認爲/希望它的權利。

也在這裏是它codepen http://codepen.io/anon/pen/vOYoEE?editors=101

<div ng-app="myAppModule" ng-controller="MyController"> 
    <div ng-repeat="s in data" class="container col-lg-4 col-md-4 col-sm-6 col-ms-8 col-xs-12"> 
    <button class="btn btn-sm" ng-class="{'btn-info': isActive(s)}" ng-click="select(s); showMe = !showMe">{{s.code}}</button> 
    <button href="#" ng-show="showMe" ng-repeat="o in s.subOptions" class="btn btn-sm">{{o.code}}</button> 
    </div> 
</div>