CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsnode.js
Shah Nawaz
Shah Nawaz

Reputation: 11

Setting ng-show value from controller but my code is not working

New to angular js. I read many solution regarding my code. The problem, I am facing is that, I have two tables. By default one table is hide and one one is visible. I want to show hidden table when I click on button and want to hide second table. When I click on button the ng-show value updated but table doesn't hide and required table doesn't show up. Thanks in advance for your help.

Code on page load : controller.js

var refresh = function(){
            /** Driver Profile Data */
            $scope.userProfile_show  = true;
            $scope.editUserProfile_show  = false;
            $http.get('/user/profile/?user_id='+$location.search()['driverID'], {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
            }).success(function (response) {
                $scope.userProfile = response.data;
            });

            });
        }

        refresh();

HTML Code: 

<table class="table" id = "editUserProfile" ng-show = "{{editUserProfile_show}}">
                <thead>
                    <tr>
                        <td>Property</td>
                        <td>Value</td>
                    </tr>
                </thead>
<table>

<table class="table" id = "userProfile" ng-show= "{{userProfile_show}}">
                <colgroup>
                    <col class="col-md-5">
                    <col class="col-md-7">
                </colgroup>
                <thead>
                    <tr>
                        <th>User Profile</th>
                        <th style="text-align: -webkit-right"><button class="btn-primary btn" id = "editUserProfile_button" ng-click = "editUserProfile()">Edit User Profile</button></th>
                    </tr>
                </thead>
<table>

On page load both table are working properly, But when click on button "Edit User Profile" then values of ng-show are updated but table doesn't switch their visibility.

Controller code for editUserProfile()

$scope.editUserProfile = function(){
            $scope.editUserProfile_show  = true;
            $scope.userProfile_show  = false;
            $http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
            }).success(function (response) {
                console.log(response.data);
                $scope.userProfile = response.data;
            });
        };

HTML View after clicking function: 

<table class="table ng-hide" id="editUserProfile" ng-show="true">
                <thead>
                    <tr>
                        <td>Property</td>
                        <td>Value</td>
                    </tr>
                </thead>
</table>

<table class="table" id="userProfile" ng-show="false">
                <colgroup>
                    <col class="col-md-5">
                    <col class="col-md-7">
                </colgroup>
                <thead>
                    <tr>
                        <th>User Profile</th>
                        <th style="text-align: -webkit-right"><button class="btn-primary btn" id="editUserProfile_button" ng-click="editUserProfile()">Edit User Profile</button></th>
                    </tr>
</table>

when I click button then ng-hide class is added to first table editUserprofile. When I remove ng-hide class then this table is visible but second table is still visible although it's ng-show is false. Expecting, issue is related to $scope.

Upvotes: 1

Views: 4170

Answers (3)

zilcuanu
zilcuanu

Reputation: 3715

You only need one variable defined in the scope. In the html for both the table's use the same scope attribute but for one table map it to ng-show and for the other table map the same attribute to ng-hide. Now based on the scope attribute only one table will be displayed at any given time.

On the ng-click of the button, just change the attribute on the scope.

In the controller: $scope.onShowClickEvent = function(){ $scope.editUserProfile=true; }

$scope.onHideClickEvent = function(){
  $scope.editUserProfile=false;
}

On the view:

<table class="table ..." id="editUserProfile" ng-show="editUserProfile">
 ....
</table>

<table class="table ..." id="userProfile" ng-show="editUserProfile">
 ....
</table>

Hope this helps.

Upvotes: 1

VizardCrawler
VizardCrawler

Reputation: 1303

$scope.editUserProfile = function(){
        $scope.editUserProfile_show  = true;
        $scope.userProfile_show  = false;
        $http.get('/user/profile/?user_id=559f6d43cd9e9cfd07422baa', {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
        }).success(function (response) {
            console.log(response.data);
            $scope.userProfile = response.data;
            $scope.editUserProfile_show  = false;
            $scope.userProfile_show  = true;
        });
    };


 var refresh = function(){
        /** Driver Profile Data */
        $scope.userProfile_show  = true;
        $scope.editUserProfile_show  = false;
        $http.get('/user/profile/?user_id='+$location.search()['driverID'], {headers:{'Authorization': 'Bearer ANmI3xaBz3MQMbrOs3XAtuAwEgZt1pbOhSMGfHHTxwhgyi4SJfmmOGcxN5bEwhFh26TyfTgKxhtHpX9rGPWHgtB7D3LBex5mDkxBL7LyhvQ2MjPNBkeNZyUBgBuhO1IK9n13YHdpfbnMdnep4PRnDHScMWmJi1kV0NxkgiIsEC3x0pHZxhhLvgEIEqF6qGVLPSXN010Em8rzXraPGV9NyG6t6a0zYYlDKONYvQ7FnwP1p67ViTu2wUgbilnwoymQ'}
        }).success(function (response) {
            $scope.userProfile = response.data;
            $scope.userProfile_show  = false;
            $scope.editUserProfile_show  = true;
        });

        });
    }

On Success You need to change the value of the Scope variable then only it will reflect

you need to change the value $scope.userProfile_show & $scope.editUserProfile_show on success as stated above.

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You don't need string interpolation i.e. {{ }} with ngShow directive, it expects a expression. If the expression is truthy then the element is shown or hidden respectively.

If you pass any string value "true" or "false" it will evaluate to truthy thus element will always be shown.

Use

ng-show = "editUserProfile_show"

instead of

ng-show = "{{editUserProfile_show}}"

Upvotes: 3

Related Questions