AngularJS: ng-hide not working

Question

Я пытаюсь скрыть столбец в своей таблице, используя ng-hide. Перед тем, как пользователь войдет в систему, столбец не должен отображаться пользователю. После входа в систему необходимо показать скрытый столбец. Но теперь, после того как я использовал свойство ng-hide, вся таблица скрыта, если пользователь не войдет в систему. Могу ли я знать, как решить эту проблему.

Это мой частичный HTML код:

<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> 

Это мой controller.js код:

.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(); 

       } 
      ] 
     ) 

В первом я установить noteEnabled ложь и проверить с сессии, если пользователь вошел в систему, тогда станет noteEnabled. Заранее спасибо.

Answer 1

Использовать ng-hide="$parent.noteEnabled" вместо ng-hide="noteEnabled".

Чтобы получить доступ к $scope переменного из цикла (нг-повтор) использует $parent

Answer 2

Реальная причина позади проблем есть, ng-repeat действительно создает дочерний объем, который образцово унаследованный от родительской области, при визуализации каждой итерации элемент, где размещен ng-repeatdirective.

И вы использовали noteEnabled переменного в качестве примитивного datatype, поэтому, когда вы используете noteEnabled переменные внутри ng-repeatdiv он добавляется внутри этой ng-repeat div scope.

noteEnabled имущество должно поддерживаться на каждом уровне элемента movies. Затем переключитесь, когда захотите.

ng-show="movie.noteEnabled" 

По умолчанию он будет скрыт & переключить его всякий раз, когда вы хотите, чтобы показать его.

Даже лучший подход заключается в том, чтобы следовать шаблону controllerAs, где вам не нужно заботиться о прототипном наследовании. Имея дело с такой переменной доступностью в пользовательском интерфейсе.

Answer 3

Here является хорошим примером использования ng-show и ng-hide и here является официальной документацией. Надеюсь, поможет !

Answer 4

В вашем случае вы используете ng-show/ng-hide только для тег в столбце, который вы хотите показать/скрыть. Таким образом, на любом сценарии вся таблица не будет скрываться, если нет данных, поэтому вы можете скрывать ее. В любом случае, как вы, код, кажется, вы неправильно использовали ng-show/hide. На контроллере вначале вы устанавливаете noteEnabled на false, и после проверки регистрации, которую вы установили noteEnabled в true. как вы использовали ng-show/hide следующим образом:

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

результат будет; сначала будет показан столбец, и после того, как ваша служба данных получит имя пользователя, он скроет столбец. Противоположность тому, что вы хотите !!!. Поэтому измените директиву, которую вы используете из ng-hide, на ng-show или измените значение, установленное на noteEnabled.

Answer 5

Я решил проблему самостоятельно. Вот решение для этого.

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