Я пытаюсь скрыть столбец в моей таблице, используя 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
станет истинным. Заранее спасибо.
Используйте ng-hide="$parent.noteEnabled"
вместо ng-hide="noteEnabled"
.
Чтобы получить доступ к переменной
$scope
из цикла (ng-repeat), используйте$parent
Я решил проблему самостоятельно. Вот решение для этого.
$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;
}
noteEnabled
В вашем случае вы используете 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.
Реальная причина проблемы заключается в том, что ng-repeat
создает дочернюю область, которая прототипически унаследована от родительской области, а также рендерит каждый элемент итерации, где размещена directive
ng-repeat
.
И вы использовали переменную noteEnabled в качестве примитивного datatype
, поэтому, когда вы используете переменную noteEnabled
внутри div
ng-repeat
она добавляется внутри этой области ng-repeat div scope
.
noteEnabled
которое должно поддерживаться на каждом уровне элемента коллекции movies
. Затем переключитесь, когда захотите.
ng-show="movie.noteEnabled"
По умолчанию он будет скрыт и переключается, когда вы хотите его показать.
Еще лучший подход - следовать шаблону controllerAs
, где вам не нужно заботиться о прототипном наследовании. Имея дело с такой переменной доступностью в пользовательском интерфейсе.
noteEnabled
для каждого фильма? Или он должен быть установлен только один раз внутри функции getAllMovie?