Utilizing a variable named activeScope to manage the state and toggle between two forms. This variable updates its value when a tab is clicked, triggering changeScope.
While the change in active states for the tab buttons registers correctly, the divs form0 and form1 fail to toggle. It appears that there may be an issue with using ng-show, as the expression doesn't evaluate when the value of activeScope changes.
Tab markup:
<ul class="nav navbar-nav navbar-right" ng-controller="SearchScope as scope">
<li ng-repeat="item in scopes" ng-class="{'active': isScopeActive({{$index}})}"><a href="" ng-click="changeScope($index)">{{item}}</a></li>
</ul>
Div markup:
<div class="container main-form" ng-controller="SearchScope as scope">
<div id="form0" ng-show="isScopeActive(0)" ng-controller="SingleIPController as sip">
...
</div>
<div id="form1" ng-show="isScopeActive(1)">
...
</div>
</div>
Controller code:
app.controller("SearchScope", function($scope) {
$scope.activeScope = 0;
$scope.scopes = ['Individual IP Data', 'All IP Data'];
$scope.isScopeActive = function(index){
if(index == $scope.activeScope){
return true;
} else {
return false;
}
};
$scope.changeScope = function(index){
$scope.activeScope = index;
};
});
app.controller("SingleIPController", function($scope, $http){
...
});
If anyone could provide guidance on how to properly implement ng-show or suggest a solution to this issue, it would be greatly appreciated.