angular-ui-bootstrap Tabs

-1

Ich bin neu in UI-Bootstrap. Ich versuche tatsächlich, einige Komponenten als Tabs zu verwenden, um ein Menü für meine App zu erstellen. Meine Lösung funktioniert leider nicht. Wer kann bitte helfen. Hier ist mein Code.angular-ui-bootstrap Tabs

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>

Vielen Dank im Voraus

Quelle

2017-02-02 Hawa SY Coulibaly

Sie dies einfach tun können

$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 
    } 
    ]

in 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>

Werfen Sie einen Blick auf diese plunker

Quelle

2017-02-02 13:54:07

Es sieht so aus, als würden Sie Ihre Module durcheinander bringen. Sie haben zwei Module scolarite und ui.bootstrap.demo eingerichtet und dann haben Sie die -Steuerung an einen von ihnen angeschlossen - das Modul ui.bootstrap.demo, aber Sie verwenden das Modul scolarite in der App ng-app Direktive.

Um dies zu beheben, können Sie Ihre ng-app Richtlinie ändern, so dass Ihre App Ihrer ui.bootstrap.demo Modul verwendet (die mit dem Controller), wie folgt aus:

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

Dann Sie die Deklaration der scolarite entfernen Modul durch diese Zeile entfernen:

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

Exkurs: Sie können diese in die andere Richtung tun um die Der Schlüssel ist, den Controller an das Modul anzuschließen, das Sie in Ihrer ng-app Direktive angeben.

Quelle

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' 
    }; 
});

Quelle

2017-02-02 14:00:38

angular-ui-bootstrap Tabs

Antwort

Verwandte Themen