Shaluka Attanayake Ответов: 1

Как отобразить выбранное значение вне uib-tab


У меня есть вкладки Bootstrap Ui, то есть загрузка значений из объекта массива в контроллер. Именно это я и пытаюсь сделать. когда пользователь нажимает на вкладку, Я хочу отобразить значение на DIV (вне UIB-tab), и оно должно быть получено от контроллера.

В настоящее время он работает в стороне uib-tab и отображает значение внизу (изображение 1).но я хочу, чтобы он отображался справа (изображение 2).Я новичок в AngularJs

Что я уже пробовал:

index.html

<div class="row grid-divider" ng-controller='TopController'  >
        <div class="col-sm-2" >
          <uib-tabset active="activePill" vertical="true" type="pills"  >
            <uib-tab ng-repeat="mod in api.modules" heading="{{mod.name}}" >
              <div class="col-sm-5" style="font-size:2em; border-bottom:1px 
                 solid #ecf0f1;">
                {{mod.name}}
               </div>
            </uib-tab>
          </uib-tabset>
        </div>
      </div>


Controller

app.controller("TopController", function($scope){
    $scope.api = details;
});

var details = {
  root_url : "http://abc/",
  modules : [{
    name : "Content",
      methods : [{
            name : "Service List",
            method : "GET",
            headers : [{
                key : "Content-Type",
                value : "application/json"
              },{
                key : "access_token",
                value : "(String)"
              }
            ],request : "",
            response : {
              "status" : "(Boolean)",
              "code" : "(Integer)"
            }
          }
            ]
        },{
      name : "Payments",
      methods : [{
          name : "Wallets",
          method : "GET",
          headers : [{
              key : "Content-Type",
              value : "application/json"
            },{
              key : "token",
              value : "(String)"
            }
          ],
          request : "",
          response : {
            "status" : "(Boolean)",
            "code" : "(Integer)"
          }
        }
      ]
    }
    ]
};


This is Working <a href="http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview"></a>[<a href="http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview" target="_blank">^</a>]Plunker

but i want to display selected values on green color area.<a href="http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview"></a>[<a href="http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview" target="_blank">^</a>]like this

1 Ответов

Рейтинг:
1

Member 13306253

Привет, решение!

index.html

<div class="container">
  <div ng-app='app' class="row grid-divider" ng-controller='TopController'  >
    <div class="col-sm-3" >
      <uib-tabset active="activePill" vertical="true" type="pills"  >
        <uib-tab ng-repeat="mod in api.modules" heading="{{mod.name}}" select="chooseTab(mod)"></uib-tab>
      </uib-tabset>
    </div>
    <div class="col-sm-5" style="font-size:2em; border-bottom:1px solid #ecf0f1;background-color: green;height: 100px;">
        {{mod.name}}
    </div>
  </div>
</div>


Контроллер (просто добавьте ниже код в контроллер)
$scope.mod = null;
$scope.chooseTab = function (inMod) {
  $scope.mod = inMod;
};