There are 2 div elements below, and I need to display only one of them depending on whether the doStuff() function is triggered in the controller when a specific anchor element is clicked.
<div ng-controller='myController'>
<div ng-show="{{states['currentState'] == 'A'}}">
// This div will be displayed if currentState is A
<a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="{{states['currentState'] == 'B'}}">
// This div will be displayed if currentState is B
</div>
</div>
Here is the code for the controller:
myApp.controller('myController', ['$scope', function($scope) {
var states = ['A', 'B'];
$scope.states = states;
$scope.states['currentState'] = $scope.states['currentState'] || 'A';
$scope.doStuff = function(stateToShow) {
// Perform actions here
$scope.states['currentState'] = stateToShow;
};
}]);
The above code does not switch to state 'B' after clicking the Do stuff and show B anchor element. Can anyone help me understand why?
Edit
app.js
//...
.state('home', {
url: '/',
views: {
'': { templateUrl: 'partials/index.html' },
'myView@home': {
templateUrl: 'partials/myView.html',
controller: 'VehicleController'
}
// Other named ui views
}
})
//...
index.html
<div class="main">
<div class="container">
<div class="row margin-bottom-40">
<div class="col-md-12 col-sm-12">
<div class="content-page">
<div class="row">
<div ui-view="myView"></div>
<!-- other named ui-views -->
</div>
</div>
</div>
</div>
</div>
</div>
myView.html
<div ng-controller='myController'>
<div ng-show="states['currentState'] == 'A'">
// This div gets shown if currentState is A
<a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="states['currentState'] == 'B'">
// This div gets shown if currentState is B
</div>
</div>