AngularJS：ng-hide不起作用

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" 。

要從循環（ng-repeat）訪問$scope變量，請使用$parent

Answer 2

問題背后的真正原因是， ng-repeat確實創建了從父范圍繼承的子范圍，同時渲染了放置ng-repeat directive每個迭代元素。

並且您已經將noteEnabled變量用作原始datatype ，因此當您在ng-repeat div使用noteEnabled變量時，確實會將其添加到該ng-repeat div scope 。

要在movies集合的每個元素級別上維護noteEnabled屬性。 然后，隨時切換。

ng-show="movie.noteEnabled"

默認情況下，它將被隱藏並在您想要顯示時切換它。

更好的方法是遵循controllerAs模式，在這里您無需關心原型繼承。 在UI上處理這樣的變量訪問時。

Answer 3

這是如何使用ng-show和ng-hide的一個很好的示例， 這也是官方文檔。 希望能幫助到你 ！

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;
                                }