Hide on click Angular JS - jQuery nextUntil() functionality

Question

I have a table with yellow rows which act as .separtor's.

Initial Table

<tr class="separator">
    <td></td>
    <td></td>         
</tr>

<tr ng-repeat="item in items">
    <td>{{item.blah}}</td>
    <td>{{item.blah2}}</td> 
</tr>

<tr class="separator">
    <td></td>
    <td></td>
</tr>

<tr ng-repeat="item in itemsTwo">
    <td>{{item.blah3}}</td>
    <td>{{item.blah4}}</td>
</tr>

The following jQuery code allows me to click on a separator and hide everything below it.

$('body').on('click','.separator',function(){
    $(this).nextUntil('.separator:not(.omit)').toggle();  //there are cases where I want to omit some separators based on class.
});

Top .separator has been clicked

I am very new to angular and am trying to get to the point where I can use AngularJS as much as possible to accomplish tasks.. but the only thing I can think of is to initialize a boolean array and then assign the ng-hide directive to each applicable tr based on an index of the array. And then use ng-click to set the proper index in the array to true/false.. But in that case perhaps it would just be better to use jQuery for this task..

What do you feel is the best way to proceed?

Is there an better way to accomplish this using angular? jqlite etc..

Is it best to use jQuery?

From the looks of your code, you're listening to the body for input, then letting the event bubble up to a determine which section to show/hide, in Angular you can attach click events to the body as well, but it's easier to just create a loop and have ng-repeat create the events on each section for you. — SoluableNonagon
– SoluableNonagon, Commented May 6, 2014 at 17:32

SoluableNonagon · Accepted Answer · 2014-05-06 17:25:52Z

What do you feel is the best way to proceed?

-Create nested ng-repeat, initialize variable for show/hide inline or in your js (using ng-init is not exactly best practice here, but it will do the trick; what you really want is to initialize a variable in the JS when you generate your list to control visibility of your lists)

<tbody ng-repeat="sublist in masterList">
    <tr class="separator" ng-init="sublist.showMe = true" ng-click="sublist.showMe =! sublist.showMe">
        <td></td>
        <td></td>
    </tr>

    <tr ng-repeat="item in sublist" ng-show="sublist.showMe">
        <td>{{item.blah3}}</td>
        <td>{{item.blah4}}</td>
    </tr>
</tbody>

Is it best to use jQuery?
- Not unless you Really need it... such as for plugins that AngularJS might not have, otherwise, there's a way to do this via AngularJS

Is there an better way to accomplish this using angular? jqlite etc..?
-Yes, and no, since you are used to jQuery and doing things the jQuery way switching to the angular way might be a bit of an uphill climb for you, but while worth it, it might not be better if you're on a tight deadline... otherwise, use AngularJS. Note: The use of jqLite is probably best left to directives, rather than calling it it your controllers, as jqLite can control DOM manipulation and DOM manipulation should be left to your directives. The above code can be put into a directive which loops a set of data.

Collectives™ on Stack Overflow

Hide on click Angular JS - jQuery nextUntil() functionality

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related