AngularJS: ng-hide not working

Question

I am trying to hide a column in my table using ng-hide. Before the user logins the column should not been shown to the user. After they login the hidden column should be shown. But now after i used the ng-hide property the whole table is hidden if the user isnt login into the system. Can i know how to solve this problem.

This is my partial html code:

<table class="table table-hover table-bordered">
<thead>
    <tr>
        <th>Title</th>
        <th>Description</th>
        <th ng-show="noteEnabled">Note</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="movie in movies | pagination: currentPage * entryLimit | limitTo: entryLimit" data-ng-class="{'selected':selectedFilm.film_id===movie.film_id}" >
        <td>
            {{movie.title}}
        </td>
        <td>
            {{movie.description}}
        </td>

        <td    data-ng-click="selectFilmDetails($event,movie)"  ng-show="movie.noteEnabled" >
            {{movie.comment}}
        </td>

    </tr>   
</tbody>
</table>

This is my controller.js code:

.controller('AllMovieController', 
            [
                '$scope', 
                'dataService', 
                '$location',

                function ($scope, dataService, $location){
                    $scope.noteEnabled = false;
                    $scope.movies = [ ];
                    $scope.movieCount = 0;
                    $scope.currentPage = 0; //current page
                    $scope.entryLimit = 20; //max no of items to display in a page

                    var getAllMovie = function () {
                        dataService.getAllMovie().then(
                            function (response) {
                                var userName=dataService.getSessionService('user');
                                    $scope.movieCount = response.rowCount + ' movies';
                                if(userName){
                                    $scope.movies = response.data;
                                    $scope.userLogin = dataService.getSessionService('user');
                                    $scope.userLoginEmail = dataService.getSessionService('userEmail');
                                    $scope.showSuccessMessage = true;
                                    $scope.successMessage = "All movie Success";
                                    $scope.noteEnabled = true;

                                }


                            },
                            function (err){
                                $scope.status = 'Unable to load data ' + err;
                            }
                        );  // end of getStudents().then
                    };

                    $scope.numberOfPages = function(){
                        return Math.ceil($scope.movies.length / $scope.entryLimit);
                    };
                    //------------------
                    $scope.selectFilmDetails = {};
                    $scope.selectFilmDetails = function ($event,movie) {
                        $scope.selectFilmDetails = movie;
                        $location.path('/filmDetails/' + movie.film_id);

                    }



                    getAllMovie();

                }
            ]
        )

At first i set the noteEnabled to false and check with the session if the user is logged in then the noteEnabled will become true. Thanks in advance.

Be aware that a client side solution is nothing more than a feature to control look'n'feel. If you want to keep away information from the visitor, you should write a server side solution. — Pinke Helga, Mar 27 '16 at 05:31

score 1 · Answer 1 · answered Mar 27 '16 at 05:17

1

Use ng-hide="$parent.noteEnabled" instead of ng-hide="noteEnabled".

To access $scope variable from the loop (ng-repeat) use $parent

answered Mar 27 '16 at 05:17

Henrikh Kantuni

901
11
14

http://stackoverflow.com/questions/16573954/pass-parent-scope-value-into-ng-repeat-loop-in-angular – Henrikh Kantuni Mar 27 '16 at 05:25

score 0 · Answer 2 · edited Mar 27 '16 at 07:19

0

The real cause behind problem is, ng-repeat does create child scope which is prototypically inherited from parent scope, while rendering each iteration element where ng-repeat directive has placed.

And the you have used noteEnabled variable as primitive datatype, so when you use noteEnabled variable inside a ng-repeat div it does gets added inside that ng-repeat div scope.

noteEnabled property to be maintained on each element level of movies collection. Then do toggle, whenever you want.

ng-show="movie.noteEnabled"

By default it will be hidden & toggle it whenever you want to show it.

Even better approach is to follow controllerAs pattern where you don't need to care about prototypal inheritance. While dealing with such a variable access thing on UI.

edited Mar 27 '16 at 07:19

Remi Guan

21,506
17
64
87

answered Mar 27 '16 at 05:24

Pankaj Parkar

134,766
23
234
299

i dont get it are there any examples which i can refer to? – anonymous5671 Mar 27 '16 at 05:31
May I know one thing, you wanted to set `noteEnabled` flag for each movie? Or it should be set only once inside getAllMovie function? – Pankaj Parkar Mar 27 '16 at 05:35
actually in my table there is a column called Notes. Currently , i want to hide the whole Notes column only before the user logs in. After the user logs in, the whole notes column should be shown. – anonymous5671 Mar 27 '16 at 05:38
@anonymous5671 I'm sorry to interrupt you, but have you tried my solution? – Henrikh Kantuni Mar 27 '16 at 05:44
@anonymous5671 Can you provide the whole html, not just the tbody part. Thanks in advance! – Henrikh Kantuni Mar 27 '16 at 05:48
sure will do check my question again @HenrikhKantuni – anonymous5671 Mar 27 '16 at 05:55
I need to see the whole HTML file, not just the table. Actually, I just need to know do you have only one controller before the table or few nested? – Henrikh Kantuni Mar 27 '16 at 06:00
in case of nested controllers, try $parent.$parent (etc.) to find the right parent scope of your variable. – Henrikh Kantuni Mar 27 '16 at 06:11

score 0 · Answer 3 · 2016-03-27T06:24:48.860

0

Here is a good example of how to use ng-show and ng-hide and here is the official documentation as well . Hope it helps !

edited Mar 27 '16 at 06:24

answered Mar 27 '16 at 06:17

score 0 · Answer 4 · answered Mar 27 '16 at 06:57

In your case you have use ng-show/ ng-hide only to tag in of the column you want to show/hide. So on any scenario whole table will not be hide unless there is no data so you may is it as hidden. Anyway as per you code, seems you have misused ng-show/hide. On controller initially you set noteEnabled to false and after you check the logging you set noteEnabled to true. as you have used ng-show/hide as follows

<td data-ng-click="selectFilmDetails($event,movie)"  ng-hide="noteEnabled" >
  {{movie.comment}}
</td>

the result will be; initially column will be shown and after your dataService receive userName it will hide the column. The opposite of what you want!!!. So change the directive you use from ng-hide to ng-show or change the value set to noteEnabled.

score 0 · Answer 5 · answered Mar 27 '16 at 07:21

I solved the problem by myself. Here is the solution for it.

$scope.noteEnabled = false;
$scope.movies = [ ];
$scope.movieCount = 0;
$scope.currentPage = 0; //current page




var getAllMovie = function () {
                        dataService.getAllMovie().then(
                            function (response) {
                                var userName=dataService.getSessionService('user');
                                    $scope.movieCount = response.rowCount + ' movies';
                                if(userName){
                                    $scope.movies = response.data;
                                    $scope.userLogin = dataService.getSessionService('user');
                                    $scope.userLoginEmail = dataService.getSessionService('userEmail');
                                    $scope.showSuccessMessage = true;
                                    $scope.successMessage = "All movie Success";
                                    $scope.noteEnabled = true;
                                }else{
                                    $scope.movies = response.data;
                                    $scope.noteEnabled = false;
                                }

I'm wondering how will it work when you change `noteEnabled` value — Pankaj Parkar, Mar 27 '16 at 07:30

AngularJS: ng-hide not working

5 Answers5