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(); 

       } 
      ] 
     ) 

最初に私がfalseにnoteEnabledを設定し、ユーザーがある場合、セッションに確認してくださいログインするとnoteEnabledがtrueになります。前もって感謝します。

Answer 1

ng-hide="noteEnabled"の代わりにng-hide="$parent.noteEnabled"を使用してください。各反復のレンダリング中

は、（NG-repeatが）prototypically親スコープから継承された子スコープを作成するん$parent

Answer 2

問題の背後にある本当の原因は、ng-repeatを使用するループから$scope変数にアクセスするには要素ng-repeatdirectiveが配置されています。

そして、あなたは、あなたがng-repeatdiv内noteEnabled変数を使用するときに、それがそのng-repeat div scope内で追加されるん、プリミティブdatatypeとしてnoteEnabled変数を使用していました。

noteEnabled各要素レベルで維持されるプロパティは、moviesコレクションです。その後、いつでもトグルしてください。デフォルトでは

ng-show="movie.noteEnabled" 

あなたはそれを表示したい時はいつでも、それはそれトグル&を非表示になります。

さらに良いアプローチは、プロトタイプの継承を気にする必要がない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; 
           }