在同一页面的 2 个选项卡之间流动数据答案

【问题标题】：Flow data between 2 tabs of the same page在同一页面的 2 个选项卡之间流动数据
【发布时间】：2018-10-16 13:33:09
【问题描述】：

我在不同的选项卡中以不同的模式打开了同一页面，当我按下一个应该填充输入的按钮时，数据填充在最后一个打开的选项卡中，而不是已单击的选项卡中。角度输入：

<input type="text" 
       class="form-control" 
       id="Type"
       style="width:170px;text-align:auto"
       ng-model="This_Page.Data.Type"
       ng-disabled="This_Page.Action == 'View'"
       autocomplete="off">

代码：

$scope.This_Page.Data.Type = l_Details.Type;

我应该怎么做才能确保每个选项卡都只获取它的数据？

编辑 1：

我想我的问题还不够清楚......

我有一个基于选项卡构建的应用程序，每个选项卡都分配有自己的控制器，可根据请求打开。一些选项卡用于双重行为（相同的 HTML，相同的控制器代码）：创建元素（例如用户登录凭据）和编辑元素（编辑用户凭据）。

问题是，当我打开同一选项卡的两个实例时，我在其中一个选项卡中输入的任何内容泄漏到同一选项卡的另一个实例。

希望这能让事情更清楚。

谢谢！

【问题讨论】：

您可以使用：ng-model 在单页中绑定输入。
我不明白....同一页只有 2 个标签。

标签： javascript angularjs

【解决方案1】：

使用此代码：您可以绑定：{{}} 并在 js 中返回 html：${}

(function () {
  'use strict';

  angular
      .module('MyApp',['ngMaterial'])
      .controller('AppCtrl', AppCtrl);

  function AppCtrl ( $scope ) {
    $scope.data = {
      selectedIndex: 0,
      firstDataSet: "First Data set",
      secondDataSet:   "Second Data set"
    };
    
    $scope.selectedTab = function(index) {
      if(index === 'one')
        return $scope.data.firstDataSet;
      if(index === 'two')
        return $scope.data.secondDataSet;
    }
  }
})();

.tabsdemoStaticTabs md-tab-content {
  padding: 25px; }
  .tabsdemoStaticTabs md-tab-content:nth-child(1) {
    background-color: #42A5F5; }
  .tabsdemoStaticTabs md-tab-content:nth-child(2) {
    background-color: #689F38; }
  .tabsdemoStaticTabs md-tab-content:nth-child(3) {
    background-color: #26C6DA; }

.tabsdemoStaticTabs .after-tabs-area > span {
  margin-top: 25px;
  padding-right: 15px;
  vertical-align: middle;
  line-height: 30px;
  height: 35px; }

.tabsdemoStaticTabs .after-tabs-area > md-checkbox {
  margin-top: 26px;
  margin-left: 0; }

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
<div ng-app="MyApp" class="tabsdemoStaticTabs" ng-controller="AppCtrl" ng-cloak="">
  <md-content class="md-padding">
    <md-tabs class="md-accent" md-selected="data.selectedIndex">
      <md-tab id="1" md-on-select="resultOne = selectedTab('one')">
        <md-tab-label>
          <h3>My Tab content</h3>
        </md-tab-label>
        <md-tab-body>
          <p>
        {{ resultOne }}
          </p>
        </md-tab-body>
      </md-tab>
      <md-tab id="2" md-on-select="resultTwo = selectedTab('two')">
        <md-tab-label>
          <h3>My Tab content</h3>
        </md-tab-label>
        <md-tab-body>
          <p>
            {{ resultTwo }}
          </p>
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </md-content>


</div>

【讨论】：