Ryan Gedwill Ryan Gedwill - 5 months ago 16
AngularJS Question

hiding the scope in angularJS

I have a problem in which I need to hide results until the user has started typing into the search bar. I am using a DotNetNuke plugin, and therefore did not build this module myself. The scopes I believe I need to use are for '

.angrid-search
' which has a method that returns the search terms, which it will then use in order to decide if the 'angrid-grid' will be displayed. This is the code I have tried thus far, as well as many different similar variations.

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


angular.element($('.angrid-search'))
comes back with
undefined
, and returns the search terms once something is typed in. It seems to me that the problem is in the second line, in which I try to hide the element.

I am extremely new to Angular (this is pretty much my first real problem), so explaining in layman's terms would be greatly appreciated, especially since I need to learn just as importantly as I need to solve this problem.

Here is the basic DOM

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


There is a bunch of stuff inbetween, but these are the relavent scopes and I did not want to cpypst the inspector window. My main question is: Is the
.hide()
method supposed to work in this type of sitation?

Answer

You could try something like.

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

and in js

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