問題與角度下拉菜單和標籤

Question

我正在使用帶有angularjs的MDL選項卡。選項卡定義是：

<header class="mdl-layout__header"> 
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
     <a ng-href="#fixed-tab-1" ng-click="activateTab('Assets')" class="mdl-layout__tab">Asset Protection</a> 
     <a ng-href="#fixed-tab-2" ng-click="activateTab('Copies')" class="mdl-layout__tab is-active">Asset Copies</a> 
     <a ng-href="#fixed-tab-3" ng-click="activateTab('Savings')" class="mdl-layout__tab">Asset Savings</a> 
     <div class="mdl-layout-spacer"></div> 
    </div> 
</header> 

在標籤1中的表是：

     <tbody> 
          <tr ng-repeat="x in restdata | filter:search | orderBy:btn:reverse"> 
           <td class="mdl-data-table__cell--non-numeric mdl-typography--thin">{{ x.asset }}</td> 
           <td class="mdl-data-table__cell--non-numeric"> 
            <i id="ttadd01{{$index}}" class="material-icons icon-border md-15" 
             ng-click="tableAction(x.id)" ng-class="{ 'select600': x.actionselected}"> 
             add 
            </i> 
            <div class="mdl-tooltip" for="ttadd01{{$index}}">Add</div> 
            <i id="menu-action01{{$index}}" ng-click="tableList(x.id)" class="material-icons icon-border md-15">more_vert</i> 
            <div ng-show=(x.selected)"> 
             <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="menu-action01{{$index}}"> 
              <li ng-click="tableListAction($index)" class="mdl-menu__item" 
               ng-repeat="act01 in tableListActions"> 
               <i class="material-icons md-15">{{ act01.icon }}</i>{{ act01.name }} 
              </li> 
             </ul> 
            </div> 
            <div class="mdl-tooltip" for="menu-action01{{$index}}">More Options</div> 
           </td> 
          </tr> 
         </tbody> 

在第二個選項卡，很相似：

     <tbody> 
          <tr ng-repeat="y in restdata | filter:search | orderBy:btn:reverse"> 
           <td class="mdl-data-table__cell--non-numeric mdl-typography--thin">{{y.rental}}</td> 
           <td class="mdl-data-table__cell--non-numeric"> 
            <i id="ttadd02{{$index}}" class="material-icons icon-border md-15" 
             ng-click="tableAction(y.id)" ng-class="{ 'select600': y.actionselected}"> 
             add 
            </i> 
            <div class="mdl-tooltip" for="ttadd02{{$index}}">Add</div> 
            <i id="menu-action02{{$index}}" ng-click="tableList(y.id)" class="material-icons icon-border md-15">more_vert</i> 
            <div ng-show="(y.selected)"> 
             <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="menu-action02{{$index}}"> 
              <li ng-click="tableListAction($index)" class="mdl-menu__item" 
               ng-repeat="act02 in tableListActions"> 
               <i class="material-icons md-15">{{ act02.icon }}</i>{{ act02.name }} 
              </li> 
             </ul> 
            </div> 
            <div class="mdl-tooltip" for="menu-action02{{$index}}">More Options</div> 
           </td> 
          </tr> 
         </tbody> 

爲兩個標籤，數據是使用REST被拉調用（並正確顯示）。什麼是不正確顯示的下拉菜單菜單action01和02在所有的顯示以及任何標籤的第一個條目。在選項卡更改時，它會停止顯示。我已經驗證了.selected在javascript中正確設置。

有什麼想法？謝謝。

Answer 1

能否請您覈實this simple example你的情況下，沒有風格和REST調用？

<div ng-show="(y.selected)"> 
     <ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect" for="menu-action02{{$index}}"> 
     <li ng-click="tableListAction($index)" class="mdl-menu__item" ng-repeat="act02 in tableListActions"> 
      <i class="material-icons md-15">{{ act02.icon }}</i>{{ act02.name }} 
     </li> 
     </ul> 
    </div> 

的JavaScript片段：

$scope.tableList = function(id){ 
    angular.forEach($scope.restdata, function(value, key) { 
    value.selected = false; 
    }); 
    $scope.restdata[id].selected = true; 
};