угловые-ui-bootstrap Вкладки

-1

Im new для ui-bootstrap. на самом деле я пытаюсь использовать некоторые компоненты в качестве вкладок, чтобы создать меню для моего приложения. Мое решение, к сожалению, не работает. Кто может помочь. Вот мой код.угловые-ui-bootstrap Вкладки

angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']); 
 
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']).controller('TabsDemoCtrl', function ($scope, $window) { 
 
    $scope.tabs = [ 
 
     {title: 'Dynamic Title 1', content: 'Dynamic content 1'}, 
 
     {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true} 
 
    ]; 
 

 
    $scope.alertMe = function() { 
 
     setTimeout(function() { 
 
      $window.alert('You\'ve selected the alert tab!'); 
 
     }); 
 
    }; 
 
    
 
    $scope.model = { 
 
     name: 'Tabs' 
 
    }; 
 
});

<html ng-app="scolarite"> 
 
    <head> 
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
     <title>Accueil</title> 
 
     <link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/> 
 
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
 
    <link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/> 
 
     <script src="${pageContext.request.contextPath}/js/angular-1.6.1.js" type="text/javascript"></script> 
 
     <script src="${pageContext.request.contextPath}/js/angular-animate.js" type="text/javascript"></script> 
 
     <script src="${pageContext.request.contextPath}/js/angular-animate.min.js" type="text/javascript"></script> 
 
     <script src="${pageContext.request.contextPath}/js/angular-touch.js" type="text/javascript"></script> 
 
     <script src="${pageContext.request.contextPath}/js/angular-touch.min.js" type="text/javascript"></script> 
 
     <script src="${pageContext.request.contextPath}/js/acc.js" type="text/javascript"></script> 
 
      <script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.js" type="text/javascript"></script> 
 
    <script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.tpls.js" type="text/javascript"></script> 
 
    <script src="${pageContext.request.contextPath}/js/ui-bootstrap-tpls-2.5.0.min.js" type="text/javascript"></script> 
 
    <script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.min.js" type="text/javascript"></script> 
 
     </head> 
 
     <body ng-controller="TabsDemoCtrl"> 
 
     <style type="text/css"> 
 
    form.tab-form-demo .tab-pane { 
 
    margin: 20px 20px; 
 
    } 
 
</style> 
 
     <uib-tabset type="pills"> 
 
    <uib-tab heading="Inscription">Tab 1 content</uib-tab> 
 
    <uib-tab heading="Liste Etudiants" classes="btn-sm">Tab 2 content</uib-tab> 
 
    </uib-tabset> 
 
    </body> 
 
</html>

Заранее спасибо

источник

2017-02-02 Hawa SY Coulibaly

Вы можете сделать это просто

$scope.groups = [ 
    { 
     "Name" : "Alfreds Futterkiste", 
     "Country" : "Germany", 
     "open" : true 
    }, 
    { 
     "Name" : "Berglunds snabbköp", 
     "Country" : "Sweden", 
     "open": false 
    }, 
    { 
     "Name" : "Centro comercial Moctezuma", 
     "Country" : "Mexico", 
     "open" : false 
    }, 
    { 
     "Name" : "Ernst Handel", 
     "Country" : "Austria", 
     "open" : false 
    } 
    ]

в HTML

<uib-accordion close-others="true"> 
    <div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open"> 

    {{group.Country}} 
    </div> 
    </uib-accordion>

Посмотрите на эту plunker

источник

2017-02-02 13:54:07

Похоже, что вы смешиваете свои модули. Вы настроили два модуля scolarite и ui.bootstrap.demo, а затем вы подключили контроллер TabsDemoCtrl к одному из них - модуль ui.bootstrap.demo, но вы используете модуль scolarite в директиве ng-app приложения.

Чтобы исправить, вы можете изменить свою ng-app директиву так, что ваше приложение использует ваш ui.bootstrap.demo модуль (один с контроллером), например:

<html ng-app="ui.bootstrap.demo">`

Затем вы можете удалить объявление о scolarite модуль, удалив эту строку:

angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);

примечание стороны: Вы можете сделать это другой путь вокруг, чтобы подключить контроллер к модулю, указанному в директиве ng-app.

источник

2017-02-02 13:58:31

Try this solution its working fine

// Code goes here 

angular.module('scolarite', ['ui.bootstrap.demo']); 
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [ 
     {title: 'Dynamic Title 1', content: 'Dynamic content 1'}, 
     {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true} 
    ]; 

    $scope.alertMe = function() { 
     setTimeout(function() { 
      $window.alert('You\'ve selected the alert tab!'); 
     }); 
    }; 

    $scope.model = { 
     name: 'Tabs' 
    }; 
});

источник

2017-02-02 14:00:38

угловые-ui-bootstrap Вкладки

ответ

Смежные вопросы