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

Using preventDefault in the compositionend event does not make any difference

Creating a Custom Hot Module Replacement Hook for Vue.js and Webpack

Can you determine the sequence in which these code statements are placed on the call stack?

Struggling to dynamically fill the table with Ajax Json data

The peculiar behavior of Google Maps markers refreshing inconsistently upon bounds adjustment

The image showcases interactive hover effects that resemble a button popping up

Utilizing the power of anonymous functions in Angular

"Clicking and typing on the form data for the ng-click and ng-keypress

"Select2 dropdown fails to function properly upon returning to the page using the browser's

The sorting icon cannot be substituted with jQuery, AJAX, or PHP

Bidirectional communication within a checkbox collection using AngularJS

Is there a way to modify the color of a specific section of a font icon?

Is it possible to transfer a Mongo connection to JQuery code using socket.io?

Tips for implementing an onclick jquery function within an input field

Perform a Selenium action to click on each individual HTML 'a' tag on

Challenges with the dropdown menu navigation bar

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

What is the method for creating a function using the const keyword in JavaScript?

Distinguishing between a save and update using a shared Angular JS template

Load texture using ImageUtils with callback in Canvas Renderer