AngularJS:ng隐藏不工作
AngularJS: ng-hide not working
我正试图使用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
将变为true。提前谢谢。
使用ng-hide="$parent.noteEnabled"
而不是ng-hide="noteEnabled"
。
要从循环(ng重复)访问
$scope
变量,请使用$parent
这里有一个关于如何使用ng-show和ng-hide的好例子,还有官方文档。希望它能有所帮助!
在您的情况下,您只能使用ng show/ng hide来标记要显示/隐藏的列。因此,在任何情况下,除非没有数据,否则整个表都不会被隐藏,因此您可能会将其隐藏。无论如何,根据你的代码,你似乎滥用了ng显示/隐藏。在控制器上,最初您将noteEnabled设置为false,在检查日志记录后,您将noteEnable设置为true。正如你已经使用ng显示/隐藏如下
<td data-ng-click="selectFilmDetails($event,movie)" ng-hide="noteEnabled" >
{{movie.comment}}
</td>
结果将是;最初会显示列,当您的dataService收到userName后,它会隐藏该列。与你想要的相反!!!。因此,将使用的指令从ng-hide更改为ng-show,或者将值集更改为noteEnabled。
问题背后的真正原因是,ng-repeat
确实创建了从父作用域原型继承的子作用域,同时渲染ng-repeat
directive
放置的每个迭代元素。
您已经使用noteEnabled变量作为基元datatype
,所以当您在ng-repeat
div
中使用noteEnabled
变量时,它确实会添加到ng-repeat div scope
中。
要在CCD_ 16集合的每个元素级别上维护的CCD_。然后随时切换。
ng-show="movie.noteEnabled"
默认情况下,它将被隐藏&只要你想显示它,就切换它。
更好的方法是遵循controllerAs
模式,在这里您不需要关心原型继承。当在UI上处理这样一个可变访问的事情时。
我自己解决了这个问题。这是它的解决方案。
$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;
}
- PHP Javascript显示/隐藏按钮不工作
- ng隐藏和ng显示无法正常工作
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 隐藏uib弹出按钮点击不工作
- JQuery隐藏/显示无法正常工作
- 如何隐藏滚动条,但希望它继续工作
- 如何隐藏空<span>在IE中使用javascript.(注意,在其他浏览器中工作正常)
- 为什么竞争不能在离子中显示(隐藏在标题下方)(离子竞争不能正常工作)
- javascript()onclick隐藏元素-dos'我不在firefox工作
- JQuery隐藏选项没有'我在IE 11中不工作
- AngularJS:ng隐藏不工作
- 如何使多个javascript隐藏/显示在一个页面上工作
- JavaScript中的隐藏变量,它是如何工作的
- 如何使 Dreamweaver AP Div 显示/隐藏功能在 IE9 中工作
- Facebook自动收报机如何工作,例如在某些res或缩放它隐藏
- 显示/隐藏disqus按钮在火狐浏览器上无法正常工作
- 隐藏输入字段的内联 javascript 无法正常工作
- jquery设置隐藏的输入值在IE7和IE8中未按预期工作
- 密码隐藏/显示按钮只能单向工作
- jQuery 显示/隐藏缩放无法按预期工作