隱藏在angularJS中的示波器

我有一個問題，在用戶開始在搜索欄中輸入內容之前，我需要隱藏結果。我正在使用DotNetNuke插件，因此我自己並沒有構建這個模塊。我認爲我需要使用的範圍是'.angrid-search'，它有一個返回搜索項的方法，然後它將使用它來決定是否顯示'角柵格'。這是迄今我嘗試過的代碼，以及許多不同的類似變體。隱藏在angularJS中的示波器

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 Inspector窗口。我的主要問題是：.hide()方法是否應該適用於這種類型的定位？

來源

2016-05-30 Ryan Gedwill

我同情你的處境，但要把自己放在我們的腳下：*所有*我們必須繼續的是你的文章，這對我們來說不足以讓我們在不訴諸猜測和一般建議的情況下撰寫答案。理想情況下，你需要創建一個[mcve]，或者至少是關閉的東西（例如更多的代碼和實際的上下文）。 – Jeroen

我編輯過，我希望現在更有用。因爲我不太瞭解這樣做的策略，所以我很難知道知道如何做這件事的人可能需要的背景。 –

爲什麼你不能用'ngHide'的方式來做它？（'ng-hide =「！searchTerms || searchTerms ==''」'） –

你可以嘗試類似的東西。

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

來源

2016-05-30 05:29:36

是的，謝謝我不知道有一個ng-hide指令。過去，我直接對html文件進行修改時遇到了麻煩，這就是爲什麼我想盡可能避免它。 –

我明白了..但是這麼簡單，是的:) –

肯定！我開始瞭解角度的動態。這更鞏固了它，因爲我已經看到很多這種類型的邏輯被推入視圖。謝謝您的幫助！ :) –

是。它應該工作。這裏有一個演示：

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="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script data-require="[email protected]" 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

如果是這樣的話，顯然隱藏的東西會不行。你應該用另外一個問題來提供足夠的信息來從頭開始重現這個問題，所以我們可以幫助你而不訴諸猜測。

來源

2016-05-30 05:35:08 Jeroen

我很困惑，如果隱藏的東西不會工作，如果搜索條件未定義？我想我已經找到了足夠的信息來解決給定信息的問題。謝謝！ –

你的評論說的是一些微妙但很不同的問題。在評論中你提到「**搜索條件**」，但在問題中它是「**」angular.element（$（'。angrid-search'））'**「。 – Jeroen

它是「angular.element（$（'。angrid-search'））。searchTerms」，它返回爲undefined。搜索條件未定義，因爲沒有任何內容輸入到搜索欄中。一旦你輸入欄「你好」，搜索詞將返回「你好」。當搜索條件未定義時，我希望網格隱藏，因爲這發生在沒有輸入任何內容時。 –

隱藏在angularJS中的示波器

回答

相關問題