angular 中的下拉菜单和选项卡问题

Question

我在 angularjs 中使用 MDL 选项卡。 Tab 定义为：

<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 中的 table 是：

                        <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 调用提取的（并正确显示）。未正确显示的是下拉菜单 menu-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;
};

angular 中的下拉菜单和选项卡问题

Issue with drop down menu and tabs in angular

jquery

angularjs

material-design

angular-material