如何在angularjs选项卡集中呈现html内容

How can I render html content in angularjs tabset?

本文关键字：html 内容 集中 angularjs 选项      更新时间：2023-09-26

我是angularjs的新手。我目前正在开发一个页面，我应该在选项卡中显示各种表单。我已经编写了一个代码，它可以在点击按钮时激活另一个选项卡。这是html

<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="TabsDemoCtrl">
        <uib-tabset vertical="true" type="pills">
            <p>Select a tab by setting active binding to true:</p>
            <p>
                <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
                <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
            </p>
            <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled">
                {{tab.content}}
            </uib-tab>
        </uib-tabset>
        <hr />
    </div>
</body>
</html>

这是控制器js

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

这是plunker链接。。http://plnkr.co/edit/v23qWGzqbw3Y5o51KhHf?p=preview

我需要的是在"动态内容"中获取按钮，即当我们点击tab1内容中的按钮时，它会激活另一个选项卡。我还必须包含许多其他html元素。我有什么方法可以做到这一点？

请查看https://docs.angularjs.org/api/ng/directive/ngInclude.

在"tab.content"中，您应该有模板url，并像在angular文档中描述的那样使用它们。

  <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled">
      <div ng-include="tab.content"></div>
  </uib-tab>

使用以下代码

<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
      <button type="button" class="btn btn-default btn-sm" ng-click="$parent.tabs[($index+1)%2].active = true">Toggle tab</button>
    </uib-tab>

您可以在内容开始或内容结束时按下此按钮。但不是在中间使用这种方法。

对于选项卡，您可以使用ng-show指令，

<li ng-show="myScopeVar == 1">ALl your html here or use a directive</li>
<li ng-show="myScopeVar == 2">ALl your html here or use a directive</li>
<li ng-show="myScopeVar == 3">ALl your html here or use a directive</li>

如果$scope.myScopeVar==2，则只有第二个li可见，其他的都不可见。

为了激活当前选项卡中的另一个选项卡：您可以尝试以下操作：

<tabset>
 <tab heading="First" ng-attr-active="firtTab">
 <button ng-click="gotonext()">Go Next Tab</button>
</tab>
 <tab heading="Second" ng-attr-active="secondTab">Content2</tab>
</tabset>

$scope.firstTab = true;
$scope.secondTab = false;
$scope.gotonext= function(){
$scope.firstTab = false;
$scope.secondTab = true;
}
相关文章：