Question

我是angularjs的新手。我目前正在处理一个页面，我应该在tab中显示各种表单。我已经处理了一个代码，它会在按钮点击时激活其他选项卡。这是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>

这里是controller.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

我需要的是将动态内容中的按钮设置为＆＃39;即当我们点击tab1内容中的按钮时，它会激活另一个标签。我还必须包含许多其他html元素。有什么方法可以实现这个目标？

Answer 1

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

在“tab.content”中，您应该有模板网址，并使用它们，就像在角文档中描述的那样。

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

Answer 2

使用以下代码

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

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

Answer 3

对于标签，您可以使用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可见，其他的将是不可见的。

Answer 4

要从当前标签中激活另一个标签：您可以尝试：

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

如何在angularjs tabset中呈现html内容？

4 个答案: