Issue
I have a dropdown with item text of Tab1 (itemValue=1) Tab2 (itemvalue=2)
<ul class="nav nav-tabs">
<li ng-click="setTab(1)" class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
<li ng-click="setTab(2)" ng-show="tabTab2Visible"><a href="#tab2" >Tab2</a></li>
<li ng-click="setTab(3)" ng-show="tabTab3Visible"><a href="#tab3" >Tab3</a></li>
</ul>
If the user selects Tab1 from the dropdown then Tab2 is not visible and as if the user has clicked on tab2 to display the details I want to auto simulate a tab click in angularjs ? How can i do this in AngularJs ?
Solution
I think something else show be the error. Maybe you can share more code. Anyways. I've created a little example to show, how this works if you're using a dropdown or a li.
I hope this fixes your error or hint at you enough to solve it! Maybe, you can share more context.
Check the plnkr working: https://plnkr.co/edit/jsCt9ROBstC4W80s
The Script:
import angular from 'angular';
angular.module('plunker', []).controller('MainCtrl', function($scope) {
$scope.tabs = [{
name: 'Tab 1',
}, {
name: 'Tab 2',
}, {
name: 'Tab 3',
}];
$scope.setTab = function (tabName) {
$scope.urlTab = tabName;
}
$scope.urlTab = $scope.tabs[0].name;
$scope.dropdownTab = $scope.tabs[0];
});
The HTML
<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
<h2>UL Example</h2>
<ul>
<li ng-repeat="tab in tabs" ng-click="setTab(tab.name)" class="active"><a href="" data-toggle="tab">{{tab.name}}</a>
</li>
</ul>
UL Tab: {{ urlTab }}<br/>
<div>
<div ng-if="urlTab === tabs[0].name">Tab 1</div>
<div ng-if="urlTab === tabs[1].name">Tab 2</div>
<div ng-if="urlTab === tabs[2].name">Tab 3</div>
</div>
<h2>Dropdown Example</h2>
<select ng-options="tab as tab.name for tab in tabs track by tab.name" ng-model="dropdownTab">
</select><br/>
Dropdown Tab: {{ dropdownTab.name }}
<div>
<div ng-if="dropdownTab.name === tabs[0].name">Tab 1</div>
<div ng-if="dropdownTab.name === tabs[1].name">Tab 2</div>
<div ng-if="dropdownTab.name === tabs[2].name">Tab 3</div>
</div>
</div>
</body>
Answered By - joseglego
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.