Angular js tabs example with out bootstrap

Question

 <body ng-app="tabus" >

 <div  ng-controller="sample" ng-init="tab=1">

    <div class="cb"  ng-repeat="x in tabs" ng-click="{{x.click}}">   {{x.title}}</div>


    <div ng-repeat="x in tabs" ng-show="{{x.click_reflect}}">
        <p>{{x.content}}</p>
     </div>


   </div>
</body>

 <script>
    var app=angular.module("tabus",[]);
    app.controller("sample",function($scope){
    $scope.tabs = [
        { click:'tab=1',click_reflect:'tab==1', title:'Dynamic Title 1', content:'Dynamic content 1' },
        { click:'tab=2',click_reflect:'tab==2', title:'Dynamic Title 2', content:'Dynamic content 2'  }
      ];
    });

    </script>

fiddle linki have done angular js tabs,first i initialized tab=1,then when i click tab again i am declaring value after that i have used ng-show for showing tab content it is working only for first tab only when i click second tab i can not getting tab content

Maher · Accepted Answer · 2016-10-22 07:13:38Z

1

This is a way to handle this problem

var app=angular.module("tabus",[]);

app.controller("sample",function($scope){
$scope.tabs = [
 { active: true, title:'Dynamic Title 1', content:'Dynamic content 1' },
 { active: false, title:'Dynamic Title 2', content:'Dynamic content 2'  },
 { active: false, title:'Dynamic Title 3', content:'Dynamic content 3'  },
];
      
$scope.tabHandler = function(tab) {
  angular.forEach($scope.tabs, function(item) {
    item.active = false;
  })
        
  tab.active = true;
}
});

.cb {    
    list-style: none;
    padding: 10px;
    display:inline-block;
    background-color: #000;  
    color: #FFF;
    border: 1px solid black;
	border-radius: 5px;
        cursor: pointer;
}
.cb:hover{
	background-color: #4a4a4a; 
	color: #FFF;
}

<body ng-app="tabus" >

<div  ng-controller="sample" ng-init="tab=1">

        <div class="cb"  ng-repeat="x in tabs" ng-click="tabHandler(x)">{{x.title}}</div>
      
        
        <div ng-repeat="x in tabs" ng-show="x.active">
            <p>{{x.content}}</p>
         </div>
</div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>

answered Oct 22, 2016 at 7:13

Maher

2,5471 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maher Over a year ago

Hi, @DVYogesh, if you review the codes you will see we work only on one object in time. for example when you click on tab 1 we only need that object to changes, and when a object changed we can get all of them[changes] in that time, like change active/deactivate on object in above sample.

D V Yogesh Over a year ago

Excellent thanq you sir

Collectives™ on Stack Overflow

Angular js tabs example with out bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related