实施引导标签angularJs工厂或维修 [英] Implementing angularJs factory or service for bootstrap tabs

问题描述

如何编写使用angularJs引导选项卡的服务或工厂。
我放置在一个控制器，但需要不同的控制器共同作用（重复code）。

 ＆LT; UL类=净值资产净值的选项卡＆GT;
    ＆LT;李数据-NG-CLASS ={活跃：标签=== 0}＆GT;
        ＆所述; A HREF纳克单击=changeTab（0）＆GT; ＆LT; I类=发发名单＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李数据-NG-CLASS ={活跃：标签=== 1}＆GT;
        ＆LT; A HREF NG点击=changeTab（1）＆GT;＆LT; I类=发发用户＆GT;＆LT; / I＆GT;＆LT; / A＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;＆LT; D​​IV数据-NG-CLASS ={activeTab：标签=== 0}NG秀=isActiveTab（0）＆GT;
  TAB1
＆LT; / DIV＆GT;
＆LT; D​​IV数据-NG-CLASS ={activeTab：标签=== 1}NG秀=isActiveTab（1）＆GT;
  TAB2
＆LT; / DIV＆GT;
 

控制器

  $ scope.tab = 0;
    $ scope.changeTab =功能（newTab）{
      $ scope.tab = newTab;
    };
    $ scope.isActiveTab =功能（标签）{
      返回$ scope.tab ===标签;
    };
 

解决方案

您好我与出使用任何服务或工厂写
看例子

 ＆LT; UL NG-的init =标签= 1＆GT;
    ＆LT;李纳克级={活跃：标签=== 1}＆GT;
      ＆LT; A HREF NG点击=标签= 1＆GT; TAB1＆LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李纳克级={活跃：标签=== 2}＆GT;
       ＆LT; A HREF NG点击=标签= 2＆GT; TAB2＆LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT;李纳克级={活跃：标签=== 3}＆GT;
      ＆LT; A HREF NG点击=标签= 3＆GT; TAB3＆LT; / A＆GT;
    ＆LT; /李＆GT;
    ＆LT; BR＆GT;＆LT; BR＆GT;
    ＆LT; p NG秀=标签=== 1＆GT; TAB1内容和LT; / P＆GT;
    ＆LT; p NG秀=标签=== 2＆GT; TAB2含量与LT; / P＆GT;
    ＆LT; p NG秀=标签=== 3＆GT; TAB3内容和LT; / P＆GT;
＆LT; / UL＆GT;
 

通过动态控制器看到工作示例这里

how to write a service or factory for bootstrap tabs using angularJs. I placed in one controller but need a common function(repeated code) for different controllers.

<ul class="nav nav-tabs">
    <li data-ng-class="{active:tab===0}">
        <a href ng-click="changeTab(0)"> <i class="fa fa-list"></i></a>
    </li>
    <li data-ng-class="{active:tab===1}">
        <a href ng-click="changeTab(1)"><i class="fa fa-user"></i></a>
    </li>
</ul>

<div data-ng-class="{activeTab:tab===0}" ng-show="isActiveTab(0)">
  tab1
</div>
<div data-ng-class="{activeTab:tab===1}" ng-show="isActiveTab(1)">
  tab2
</div>

controller

$scope.tab = 0;    
    $scope.changeTab = function(newTab){
      $scope.tab = newTab;
    };    
    $scope.isActiveTab = function(tab){
      return $scope.tab === tab;
    }; 

解决方案

Hi I write it with out using any service or factory see the example

<ul ng-init="tab = 1">          
    <li ng-class="{active:tab===1}"> 
      <a href ng-click="tab = 1">Tab1</a>               
    </li>           
    <li ng-class="{active:tab===2}"> 
       <a href ng-click="tab = 2">Tab2</a>              
    </li>           
    <li ng-class="{active:tab===3}"> 
      <a href ng-click="tab = 3">Tab3</a>           
    </li>           
    <br><br> 
    <p ng-show="tab === 1"> Tab1 content </p>           
    <p ng-show="tab === 2"> Tab2 content</p> 
    <p ng-show="tab === 3"> Tab3 content</p>        
</ul>

Dynamically change it through controller see the working example here

这篇关于实施引导标签angularJs工厂或维修的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！