隐藏在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中的示波器

回答

相关问题