AngularJS: ng-hide not working

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.

Answers 1

  • 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;
                                    }
    

Related Articles