我想为我使用的产品选项卡添加下拉列表

Question

我想为“产品”选项卡添加下拉列表。 (Angular 与 bootstrap 3)

HTML:

<div class="animsition animated" ng-controller="websiteTabsCtrl">
    <tabset class="jdEMainBoxInRow">
                    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                      <div ng-include="tab.content"></div>
                    </tab>
                </tabset>
</div>

这是我的代码：

angular.module('website', ['ui.bootstrap']);
angular.module('website').controller('websiteTabsCtrl', function ($scope) {
  $scope.tabs = [
    { title:'HOME', content:'home.php' },
    { title:'ABOUT', content:'about.php' },
    { title:'PRODUCT', content:'product.php' },
    { title:'CONTACT', content:'contact.php'}
  ];
});

Answer 1

您可以在下面找到可以使用的建议实现。

将您的控制器定义为：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {

  $scope.tabs = [
    { title:'HOME', content:'home.html' },
    { title:'ABOUT', content:'about.html' },
    { title:'PRODUCT', content:'product.html' },
    { title:'CONTACT', content:'contact.html'}
  ];

  $scope.products = [
    { name: 'Product 1' },
    { name: 'Product 2' },
    { name: 'Product 3' }
  ];

});

在 index.html 中你可以拥有：

<uib-tabset active="active">

    <uib-tab ng-repeat="tab in tabs">

      <uib-tab-heading>

        <div ng-if="tab.title == 'PRODUCT'" uib-dropdown dropdown-append-to-body>
          <div uib-dropdown-toggle>
            {{tab.title}} <span class="caret"></span>
          </div>
          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li ng-repeat="product in products" role="menuitem"><a href='#'>{{product.name}}</a></li>
          </ul>
        </div>

        <div ng-if="tab.title !== 'PRODUCT'">
          <div>
            {{tab.title}}
          </div>
        </div>

      </uib-tab-heading>

      <div ng-if="tab.title !== 'PRODUCT'" ng-include="tab.content"></div>

    </uib-tab>

</uib-tabset>

查看工作 plunker here。

我想为我使用的产品选项卡添加下拉列表

I would like to add dropdown list for Product tab i am used

tabs

angularjs

angularjs-scope