CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
D V Yogesh
D V Yogesh

Reputation: 3700

Angular js tabs example with out bootstrap

 <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

Upvotes: 0

Views: 469

Answers (1)

Maher
Maher

Reputation: 2547

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>

Upvotes: 1

Related Questions