AngularJS Bootstrap HTML in Tabs

Ich bin neu in AngularJS und versuche, eine einfache Website mit drei Registerkarten zu erstellen. Ich mag die Bootstrap Tabs Schnittstelle so baue ich weg davon:AngularJS Bootstrap HTML in Tabs

example.js

angular.module('base', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('base').controller('UiCtrl', function ($scope, $window) { 
    content1 = "Bunch of Figs"; 
    array2 = ["Newton 1", "Newton 2"]; 
    content2 = array2.join('<br><br>'); 
    content3 = "Bunch of Widgets"; 
    $scope.tabs = [ 
    { title:'Figs', content:content1 }, 
    { title:'Newtons', content:content2 }, //, disabled: true }, 
    { title:'Widgets', content:content3, select:'alertMe()' } 
    ]; 

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

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

index.html

<!doctype html> 
<html ng-app="base"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
    <script src="example.js"></script> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<style type="text/css"> 
    form.tab-form-demo .tab-pane { 
    margin: 20px 20px; 
    } 
</style> 

<div ng-controller="UiCtrl"> 
<p> 

    <uib-tabset active="activeJustified" justified="true"> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select"> 
     {{tab.content}} 
    </uib-tab> 
    </uib-tabset> 

</div> 
    </body> 
</html>

Ich habe zwei Probleme:

1) Die HTML-Tags im Join werden auf den Registerkarten nicht als HTML behandelt. 2) Der Select Callback ist nicht auf die Registerkarte dynamic gesetzt.

Wie kann ich HTML in den Registerkarten anzeigen?

Wie kann ich ausgewählte Rückrufe an dynamische Registerkarten anhängen?

Quelle

2017-02-12 Ken J

Was ist das generierte HTML? Wie auch immer, du kannst das hier in jsfiddle posten? – Rikin

1- Sie haben ng-bind-html in Ihrem HTML zu verwenden, und $sce.trustAsHtml() in Ihrem Controller

HTML:

<uib-tabset active="activeJustified" justified="true"> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()"> 
     <div ng-bind-html="tab.content"></div> 
    </uib-tab> 
</uib-tabset>

REGLER:

angular.module('base').controller('UiCtrl', function ($scope, $window, $sce) { 
    content1 = $sce.trustAsHtml("<h1>Html content<br/> example</h1>"); 
    $scope.tabs = [ 
     { title:'Figs', content:content1 }, 
     { title:'Widgets', content:content3, select: $scope.alertMe } 
    ]; 

    .... 

});

2- Sie rufen die Funktion nicht auf.

HTML: ändern select="tab.select" zu select="tab.select()".

REGLER: ändern wählen: 'alertMe()' wählen: $scope.alertMe

Check this post about ng-bind-html

Check ui.boostrap docs about tabs

Quelle

2017-02-12 20:53:53

1. Wie kann ich HTML-Anzeige in den Registerkarten?

=> Sie können mit ng-bind-html und $sce.trustAsHtml()

HTML

<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()"> 
    <span ng-bind-html="tab.content"></span> 
</uib-tab>

$scope.tabs = [ 
    { title:'Figs', content: $sce.trustAsHtml(content1) }, 
    { title:'Newtons', content: $sce.trustAsHtml(content2) }, //, disabled: true }, 
    { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe } 
    ];

2. Wie kann ich ausgewählte Rückrufe an dynamische Registerkarten anhängen?

=> Ändern select="tab.select" zu select="tab.select()" und { title:'Widgets', content:content3, select:'alertMe()' } zu { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }

$ scope.alertMe müssen definiert werden, bevor $ scope.tabs

==> Sie auf diese Demo beziehen: https://codeide.co/master/qVGVQyWG

Quelle

2017-02-13 02:32:46

Können Sie ein Beispiel geben, um es zu erklären? –

Ich überspringe die Tab-Komponente. Vor allem, weil es keine Unterstützung für die Rücktaste hatte. Weiter wurde es schwierig, zu ex zu navigieren: der 3: rd Tab von einer anderen Seite. Also habe ich stattdessen einfaches Routing verwendet. ex: Wenn es 3 Tabs gibt, habe ich 3 Seiten mit spezifischem Routing. Um das Duplizieren des Tabmenüs zu vermeiden, habe ich eine Komponente erstellt, die ich in alle drei Seiten einfüge.

<ul ng-controller="tabsCtrl as tabs" class="nav nav-tabs"> 
    <li ng-class="{'active':tabs.generalTab.isActive}"> 
    <a ng-href="{{tabs.generalTab.path}}" translate>general.GENERAL</a> 
    </li> 
    <li ng-class="{'active':tabs.settingsTab.isActive}"> 
    <a ng-href="{{tabs.settingsTab.path}}" translate>settings.MENU_LABEL</a> 
    </li> 
    <li ng-class="{'active':tabs.extrasTab.isActive}"> 
    <a ng-href="{{tabs.extrasTab.path}}" translate>extras.MENU_LABEL</a> 
    </li> 
</ul>

Quelle

2017-02-13 13:37:51

AngularJS Bootstrap HTML in Tabs

Antwort

Verwandte Themen