AngularJS:ng隐藏不工作

AngularJS: ng-hide not working

本文关键字:工作 隐藏 ng AngularJS      更新时间:2023-09-26

我正试图使用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;
                                }