Search code examples
angularjsscopedotnetnuke

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?

Solution

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