AngularJS: скрыть-не работает

0

Я пытаюсь скрыть столбец в моей таблице, используя 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 в false и проверяю с сеансом, если пользователь noteEnabled в систему, тогда noteEnabled станет истинным. Заранее спасибо.

  • 1
    Имейте в виду, что решение на стороне клиента - это не что иное, как функция управления внешним видом. Если вы хотите скрыть информацию от посетителя, вы должны написать решение на стороне сервера.

5 ответов

1

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

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

0

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

$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;
                                }
  • 0
    Мне интересно, как это будет работать при изменении значения noteEnabled
0

В вашем случае вы используете 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.

0

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

0

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

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

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

ng-show="movie.noteEnabled"

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

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

  • 0
    я не понимаю, есть ли примеры, на которые я могу сослаться?
  • 0
    Могу ли я знать одну вещь, вы хотели установить флаг noteEnabled для каждого фильма? Или он должен быть установлен только один раз внутри функции getAllMovie?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню