Sending data back and forth across 2 tabs within one page

Question

Sending data back and forth across 2 tabs within one page

I noticed a strange behavior when using multiple tabs on the same page in different modes. When I clicked a button that was supposed to fill in some inputs, the data filled in the last tab opened instead of the one I actually clicked on. The angular input:

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

Code snippet:

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

Any idea how I can make sure that each tab only receives its own data?

EDIT 1:

It seems like my initial question might have been a bit unclear...

I am working on an application that utilizes TABs, each with its own controller, which opens when requested. Some tabs are used for both creating and editing elements (for example, User Login credentials), sharing the same HTML and Controller code.

The problem arises when I open two instances of the same tab, as any changes made in one tab seem to affect the other instance of the same tab.

Hopefully, this clarifies things a bit more.

Thank you!

javascript angularjs

Answer 1

Answer №1

Here is the code snippet: To bind with HTML, use {{}} and in JavaScript return HTML using ${}

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

Answer 2

Here is the code snippet: To bind with HTML, use {{}} and in JavaScript return HTML using ${}

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

Sending data back and forth across 2 tabs within one page

Answer №1

Similar questions

Achieving the Menu Hover Effect - step by step guide to recreating this stylish effect

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Tips for using rspec to test front end functionality?

Html5 declares that the statuses of values are not defined

Tips for sending textarea data via AJAX with TinyMCE

Avoiding redirection in Django template form

CSS/SCSS/JS: Adjusting header height dynamically while keeping it fixed at the

What is the best way to customize the appearance of chosen selections in the MUI Autocomplete component?

Instructions for creating a JavaScript click function that iterates through all records, not just the initial record

Using Vue and vue-multiselect to create interactive options based on the selected language

State not getting updated with array passed to this.setState()

tips on displaying textbox content on a php webpage

Are there any disadvantages to an API endpoint not waiting for a promise to complete before returning?

Combine two elements together and display the outcome in json form

Jest does not recognize AnimationEvent as a defined element

How to set up a MySQL database specifically for a quiz based on different "types"

Utilize AngularJS to convert datetime into decimal format

Navigational controls for a JavaScript slider - Backward and Forward options

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Utilizing jQuery to Detect TAB Key Press in Textbox