角度下拉菜单和选项卡的问题

Sharma 发表于 Dev

夏尔马

我在与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调用提取数据（并正确显示）。下拉菜单menu-action01和02没有正确显示。在任何选项卡的第一个条目上，所有显示都很好。更改选项卡后，它将停止显示。我已验证.selected是否在javascript中正确设置。

有什么想法吗？谢谢。

亚历山大·埃马舍夫（Alexander Emashev）

您能否在这个没有样式和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;
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。