Я хотел бы добавить выпадающий список для вкладки «Продукт», которым я пользуюсь - PullRequest
Новая
       13

Я хотел бы добавить выпадающий список для вкладки «Продукт», которым я пользуюсь

0 голосов
/ 02 июня 2018

Я хотел бы добавить выпадающий список для вкладки Продукт.(Угловой с начальной загрузкой 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'}
  ];
});

как ниже

enter image description here

1 Ответ

0 голосов
/ 02 июня 2018

Ниже вы можете найти реализацию предложения, которую вы можете использовать.

Определите свой контроллер как: 

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>

См. Рабочий Плункер здесь .

...