时间戳

首页 > 解决方案 > 在同一页面的 2 个选项卡之间流动数据

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

问题描述

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

<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，相同的控制器代码）：创建元素（例如用户登录凭据）和编辑元素（编辑用户凭据）。

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

希望这能让事情更清楚。

谢谢！

标签： javascriptangularjs

解决方案

使用此代码：您可以使用 : 进行绑定，{{}}并在 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>

推荐阅读