angularJSのスコープを非表示にする

Question

ユーザーが検索バーに入力を開始するまで、結果を非表示にする必要があるという問題があります。私はDotNetNukeプラグインを使用しているため、このモジュールを自分で構築しませんでした。私が使用する必要があると思うスコープは、検索用語を返すメソッドを持つ '.angrid-search'のためのもので、 'angrid-grid'が表示されるかどうかを決定するために使用されます。これはこれまで試みてきたコードだけでなく、多くの異なる類似のバリエーションです。

if (angular.element($('.angrid-search')).searchTerms === undefined){ 
    angular.element($('.angrid-grid')).hide(); 
} 

angular.element($('.angrid-search'))undefinedに戻ってくる、と何かがで入力されると、検索語を返します。問題は、私は要素を隠そうとした二行目にあるように私には思えます。

私はこの問題を解決するために必要な分だけ重要なことを学ぶ必要があるので、私は非常にAngular（これは私の最初の本当の問題です）の初心者です。

は、ここで基本的なDOM

<div class="angrid"> 
    <div class="angrid-search"> 
    </div> 
    <div class="angrid-grid-view"> 
     <div class="angrid-grid"> 
     </div> 
    </div> 
</div> 

挟ん原料の束がありますが、これらはのrelaventのスコープであり、私はインスペクタウインドウをcpypstたくありませんでした。私の主な質問は：.hide()メソッドは、このタイプの照合で動作するはずですか？

Answer 1

あなたのようなものを試すことができます。

<div class="angrid"> 
<div class="angrid-search"> 
</div> 
<div class="angrid-grid-view"> 
    <div class="angrid-grid" ng-hide="hidegrid"> 
    </div> 
</div> 

とJSで

if (angular.element($('.angrid-search')).searchTerms === undefined){ 
    angular.element($('.angrid-grid')).hidegrid = true; 
} 

Answer 2

はい。それはうまくいくはずです。ここではデモです：

angular.module('demo', []) 
 
    .controller('demoCtrl', ['$scope', 
 
    function($scope) { 
 
     $scope.testFn = function() { 
 
     if (angular.element($('.angrid-search')).searchTerms === undefined) { 
 
      angular.element($('.angrid-grid')).hide(); 
 
     } 
 
     }; 
 
    } 
 
    ]);

<script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script data-require="angular.js@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script> 
 

 
<div ng-app="demo" ng-controller="demoCtrl"> 
 
    <div class="angrid"> 
 
    <div class="angrid-search"></div> 
 
    <div class="angrid-grid-view"> 
 
     <div class="angrid-grid">Grid!</div> 
 
    </div> 
 
    </div> 
 

 
    <button ng-click="testFn()">the code will work...</button> 
 
</div>

ところで、あなたが言及：それは、その後、明らかに物事をします隠れない場合

angular.element($('.angrid-search'))はundefined

に戻ってきますうまくいかない。おそらく、問題のシナリオをゼロから再現するのに十分な情報で別の質問をする必要があります。推測に頼らずに手助けすることができます。