如何在uib-tab外显示选定的值 [英] How to display selected value outside to uib-tab

问题描述

我有Bootstrap Ui选项卡，即控制器中Array对象的加载值。这就是我想要做的。当用户点击选项卡时，我想在DIV上显示值（uib-tab外侧），它应该来自控制器。



目前它是在uib-tab旁工作并在底部显示值（图1）。但是我希望它显示在右侧（图像2）。我是AngularJs的新手



我尝试过：

  index.html  
 
< div class =row grid-dividerng-controller ='TopController'> 
< div class =col-sm-2> 
< uib-tabset active =activePillvertical =truetype =pills> 
< uib-tab ng-repeat =mod in api.modulesheading ={{mod.name}}> 
< div class =col-sm-5style =font-size：2em; border-bottom：1px 
 solid＃ecf0f1;> 
 {{mod.name}} 
< / div> 
< / uib-tab> 
< / uib-tabset> 
< / div> 
< / div> 
 
 
 控制器 
 
 app.controller（TopController，函数（$ scope）{
 $ scope.api =详细信息; 
}）; 
 
 var details = {
 root_url：http：// abc / \", 
 modules：[{
 name：Content，
方法：[{
 name：Service List，
 method：GET，
 header：[{
 key：Content-Type，
 value： application / json
}，{
 key：access_token，
 value：（String）
} 
]，request：，
回复：{
status：（布尔），
代码：（整数）
} 
} 
] 
}，{
名称：付款，
方法：[{
名称：钱包，
方法：GET，
标题：[ {
 key：Content-Type，
 value：application / json
}，{
 key：token，
 value：（String ）
 } 
]，
请求：，
响应：{
status：（布尔），
代码：（整数） 
} 
} 
] 
} 
] 
}; 
 
 
这是工作< a href =http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview>< / a> [< a href = http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview\"target =_ blank> ^< / a>] Plunker 
 
但我想在绿色上显示所选值区域。< a href =http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview>< / a> [< a href =http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t？ p =预览target =_ blank> ^< / a>]像这样

解决方案

scope）{

scope.api =详细信息;
}）;

var details = {
root_url：http：// abc / \",
modules：[{
name：Content，
方法：[{
name：Service List，
method：GET，
header：[{
key：Content-Type，
value： application / json
}，{
key：access_token，
value：（String）
}
]，request：，
回复：{
status：（布尔），
代码：（整数）
}
}
]
}，{
名称：付款，
方法：[{
名称：钱包，
方法：GET，
标题：[ {
key：Content-Type，
value：application / json
}，{
key：token，
value：（String ）
}
]，
请求：，
响应：{
status：（布尔），
代码：（整数）
}
}
]
}
]
};


这是工作< a href =http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview>< / a> [< a href = http://plnkr.co/edit/6aTqtJD1bjPB18do1Ovr?p=preview\"target =_ blank> ^< / a>] Plunker

但我想在绿色上显示所选值区域。< a href =http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t?p=preview>< / a> [< a href =http://plnkr.co/edit/jZkJ6XY3cVTolOIK2v6t？ p =预览target =_ blank> ^< / a>]就像这样

解决方案！



index.html

 <   div     class   =  container >  
 <   div     ng-app   ='  app'    class   = 行网格划分器    ng-controller   ='  TopController'     >  
 <   div     class   = < span class =code-keyword> col-sm-3   >  
 <   uib-tabset     active   =  activePill     vertical   = < span class =code-keyword> true    type   =  pills     >  
 <   uib-tab     ng-repeat   =   api.modules中的mod    heading   =  {{mod.name}}   选择  =  chooseTab（mod） >  <   / uib-tab  >  
 <  < span class =code-leadattribute> / uib-tabset  >  
 <   / div  >  
 < ;   div     class  < span class =code-keyword> =  col-sm-5   < span class =code-attribute> style   =  font-size：2em; border-bottom：1px solid＃ecf0f1; background-color：green; height：100px; >  
 {{mod.name} } 
 <   / div  >  
 <   / div  > ;  
 <   / div  >  

控制器（只需在控制器中添加以下代码）

I have Bootstrap Ui tabs,that is load values from Array object in a controller. This is what i'm trying to do. when user click on the tab,i want to display the value on DIV (out side the uib-tab) and it should be come from controller.

Currently it is work in side the uib-tab and display value in bottom (image 1).but i want it to display on right side (image 2).I'm new to AngularJs

What I have tried:

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

解决方案

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

Hi, the solution!

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>

Controller (just add below code in controller)

这篇关于如何在uib-tab外显示选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！