How to dynamically update view in AngularJS

Question

I have 2 div elements as following and I want to show only one of them based on the doStuff() function being called in the controller when an anchor element is clicked.

<div ng-controller='myController'>
    <div ng-show="{{states['currentState'] == 'A'}}">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="{{states['currentState'] == 'B'}}">
        //displaying this div if the currentState is B
    </div>
</div>

Following is the controller code:

myApp.controller('myController', ['$scope', function($scope) {

  var states = ['A', 'B'];
  $scope.states = states;
  $scope.states['currentState'] = $scope.states['currentState'] || 'A';

  $scope.doStuff = function(stateToShow) {
    //doing stuff
    $scope.states['currentState'] = stateToShow;
  };

}]);

The code above doesn't work as the state remains 'A' even after clicking the Do stuff and show B anchor element.

Could somebody help me understand why is it not working?

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'">
        //displaying this div if the currentState is A
        <a ng-click="doStuff('B')">Do stuff and show B</a>
    </div>
    <div ng-show="states['currentState'] == 'B'">
        //displaying this div if the currentState is B
    </div>
</div>

PSL · Accepted Answer · 2014-08-08 19:38:20Z

4

It is updating the scope. But possibly the issue is with the ng-show you are setting a string by using "{{notation}}" which becomes truthy always (even if it is "true" or "false"), just use the expression directly.

Change

 <div ng-show="{{states['currentState'] == 'A'}}">

to

 <div ng-show="states.currentState === 'A'">

Demo

From Doc:-

ngShow expression - If the expression is truthy then the element is shown or hidden respectively.

answered Aug 8, 2014 at 19:38

PSL

124k21 gold badges257 silver badges243 bronze badges

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

6 Comments

skip Over a year ago

Thank you PLS and Unome, I corrected that but I am still not being able to get the updated value of {{states.currentState}} in the html just like its happening in the JS Bin demo you showed. Is it possible that its not working because my html code is being used as the named ui view in the Angular UI Router module? It keeps showing the same value of {{states.currentState}} even after the click the anchor tag.

PSL Over a year ago

@skip Not sure, looking at the details that you have in your question, Can you share your actual working code in a jsbin/plnkr? if you are using named views (using ui router) do you really need to do it this way.. You could just switch the views on click right?

skip Over a year ago

I've just edited the question by adding some more code for the given issue I am facing. Could you please have a look at it?

skip Over a year ago

@PLS: I basically already have a nested view on index.html page, but I have more than one named views on the same index.html page as well. I am basically trying to give my page a portlet like effect, so I needed both the nested view and named views. I am quite new to AngularJS, I hope I am not committing a blunder here doing things like this.

PSL Over a year ago

@skip Seems fine to me... You dont have to (should not) use scope.$apply when already inside angular. plnkr.co/edit/aNjz3mO29nkfllbJpqN6?p=preview

|

Unome · Accepted Answer · 2014-08-08 19:39:38Z

1

You are very close. The reason it is not working is the attribute "ng-show" does not need the "{{" "}}" notation to work.

I just built your code but took those off, and it is working as you described you wanted it to.

<div ng-show="states['currentState'] == 'A'">
    //displaying this div if the currentState is A
    <a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="states['currentState'] == 'B'">
    //displaying this div if the currentState is B
</div>

answered Aug 8, 2014 at 19:39

Unome

6,8907 gold badges49 silver badges90 bronze badges

Collectives™ on Stack Overflow

How to dynamically update view in AngularJS

Edit

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related