Question

我有一组标签。我想知道如何在单击选项卡时从页面的不同部分获取内容。我可以通过调用不同的html页面来实现，但有没有办法显示同一页面中的内容？

   <tabset vertical="false">
            <tab heading="Scenario 1">Test</tab>
            <tab heading="Scenario 2"></tab>
            <tab heading="Dist as of 12/31/15"></tab>
            <tab heading="Custom Label"></tab>
   </tabset>

例如，如何让Scenario1的内容显示在方案一的选项卡中。我知道我可以将所有内容放在标签标记之间，但还有另一种方法可以做到。

.js page

(function () {
'use strict'

var minimumDistributionApp = angular.module('minimumDistributionApp',
['ctracApp', 'ctracApp.engagement.services', 'ngRoute']);

minimumDistributionApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/MinimumDistribution',
    {
        templateUrl: '/app/Engagement/MinimumDistribution/MinimumDistribution.html',
        controller: 'minimumDistributionCtrl',
        controllerAs: 'minimumDist'
    });
}]);


minimumDistributionApp.controller('minimumDistributionCtrl', ['$location', '$sce', function ($location, $sce) {
    var self = this;
    $scope.setActive = function(current){
        $scope.active = current;
    };

    $scope.amIActive(id)
    {
        if ($scope.active == id)
        {
            return true;
        }
        else
        {
            return false;
        }
    };

    }]);
 });

Answer 1

使用ROUTE PROVIDER

使用此方法，您将使用角度模块应用程序，注入ngRoute，以便您可以操作请求。在index.html文件中，您可以使用ng-view更改div ID，这样您就可以使用ngRoute更改ng-view的代码。

在你的Tabset上，我添加了一些指向scenario /：id的链接，所以我可以使用ID来查找$ routeProvider中相应的html。

的index.html

<html ng-app='app'>
  <body>
    <tabset vertical="false" ng-controller='tabController'>
        <tab a href='#/scenario/1' heading="Scenario 1" ></tab>
        <tab a href='#/scenario/2' heading="Scenario 2"></tab>
        <tab a href='#/scenario/3' heading="Dist as of 12/31/15"></tab>
        <tab a href='#/scenario/4' heading="Custom Label"></tab>
    </tabset>

    <div ng-view>
    </div>

  </body>
    <script src="angular.js">
    <script src="angular-route.js">
    <script src='app.js'>
</html>

scenario1.html

<div>
  This is scenario 01
</div>

app.js

var app = angular.module('app', [ngRoute]);

app.controller('tabController', function(){});

app.config( function($routeProvider) {
  $routeProvider
    .when('/scenario/:ID',
      {
        controller: 'tabController',
        templateUrl: function($routeParams) {
          return 'scenario' + routeParams.ID + '.html' }
      })
    .otherwise( { template: '<div> Ohh, 404! :D </div> });
});

templateUrl将指导文件的路径，而模板将显示直接HTML。 templareUrl可以接收返回路径的路径或函数。在这种情况下，我需要访问：ID，这是一个Route Param，所以我需要注入$ routeParams依赖项才能访问它。

.otherwise方法将指导默认的404页面。

从同一页隐藏和显示内容

首先，一切都在同一页面上。我使用ng-if，但我也可以使用ng-show或ng-hide。有了这三个，我们可以根据范围变量或范围函数显示或隐藏内容。在something.html中，我在选项卡上调用一个函数来设置活动选项卡，在下面，我有所有div，只有在相应的选项卡处于活动状态时才会显示。

something.html

    <tabset vertical="false" ng-controller='tabController'>
        <tab ng-click='setActive(1)' heading="Scenario 1" ></tab>
        <tab ng-click='setActive(2)' heading="Scenario 2"></tab>
        <tab ng-click='setActive(3)' heading="Dist as of 12/31/15"></tab>
        <tab ng-click='setActive(4)' heading="Custom Label"></tab>
    </tabset>

    <div ng-if='amIActive(1)' id='Scenario1'>
        This is test content 1
    </div>

    <div ng-if='amIActive(2)' id='Scenario2'>
        This is test content 2
    </div>

    <div ng-if='amIActive(3)' id='Scenario3'>
        This is test content 3
    </div>

    <div ng-if='amIActive(4)' id='Scenario4'>
        This is test content 4
    </div>

app.js

app.controller('tabController', function(){
  $scope.setActive = function(current){
    $scope.active = current;
  };

  $scope.amIActive = function(id) {
    if($scope.active == id){
      return true;
    } else { return false; }
  };
});

在Angular选项卡中调用页面中不同位置的内容

1 个答案: