Поток данных между 2 вкладками одной страницы

Question

Я открывал одну и ту же страницу в разных вкладках с разным режимом, и когда я нажал одну из кнопок, которая должна заполнить входы, открылись данные, заполненные в последней вкладке, а не вкладка, на которой была нажата.Угловой ввод:

<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, тот же код контроллера): создать элемент (например, учетные данные для входа в систему пользователя) и изменить элемент (редактировать учетные данные для пользователя).

Проблема заключается в том, что при открытии двухэкземпляры той же вкладки, что бы я ни вводил на одной из вкладок , просачивается в другой экземпляр этой же вкладки.

Надеюсь, это прояснит ситуацию.

Спасибо!

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