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设置为false，并在会话中检查用户是否已登录，然后noteEnabled将变为true。提前谢谢。

Answer 1

使用ng-hide="$parent.noteEnabled"代替ng-hide="noteEnabled"。

要从循环中访问$scope变量（ng-repeat），请使用$parent

Answer 2

问题背后的真正原因是，ng-repeat确实创建了子范围，该范围原型继承自父范围，同时呈现ng-repeat directive所放置的每个迭代元素。

您已将noteEnabled变量用作原始datatype，因此当您在noteEnabled ng-repeat中使用div变量时，它会在ng-repeat div scope内添加}。

要在noteEnabled集合的每个元素级别维护

movies属性。然后随时切换。

ng-show="movie.noteEnabled"

默认情况下会隐藏＆amp;每当你想要显示它时都要切换它。

更好的方法是遵循controllerAs模式，您不需要关心原型继承。在UI上处理这样的变量访问事物时。

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>

结果将是;将显示最初的列，并且在您的dataService接收userName之后，它将隐藏该列。与你想要的相反!!!因此，将您使用的指令从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;
                                }

AngularJS：ng-hide无法正常工作

5 个答案: