Angular ng-click ordering

Question

New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/

From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?

            <div id="buttons" class="row">
            <div class="col-sm-6 col-md-4">
                    <a href="" id="1" ng-click="order('attraction');" class="btn btn-primary btn-block active">a-z</a>

            </div>
            <div class="col-sm-6 col-md-4">
                    <a href="" id="2" ng-click="order('country'); villa = !villa" class="btn btn-primary btn-block inactive">Country/State</a>

            </div>
            <div class="col-sm-6 col-md-4">
                    <a href="" id="3" ng-click="order('category')" class="btn btn-primary btn-block inactive">type of attraction</a>

            </div>
            </div>

            <article>

                        <div class="row">

                <div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
                <div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
            <h2 ng-show="villa">{{selfieObj.country}}</h2>
            </div>

            <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
                        <div class="caption">
                            <h3>{{selfieObj.attraction}}</h3>
                            <p class="text-center">
                                {{selfieObj.answer}} {{selfieObj.info}}
                            </p>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            </article>

EDIT:

https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.

To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.

It's hard to see the exact error phenomenon without understanding your test data: what list do you expect to see when the country/state filter is in effect, and what when it is not? (Maybe we can make the test data array much smaller?) — doldt
– doldt, Commented Jul 16, 2015 at 9:41
When the Country/state filter is in effect you see the Country name appear. I want this filter to disappear when another filter is pressed. — Tom Rudge
– Tom Rudge, Commented Jul 16, 2015 at 9:53

doldt · Accepted Answer · 2015-07-16 09:13:26Z

1

The sorting seems to work fine in your fiddle, so is this just a visual issue? Just remove the initial states from the buttons:

class="btn btn-primary btn-block"

instead of adding active or inactive by default.

I have forked your fiddle with the fix: fiddle

answered Jul 16, 2015 at 9:13

doldt

4,5063 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Rudge Over a year ago

Hi. Thanks for the response. I think you may have misunderstood. When I click on one button I want the previous filter not to work (or be removed) e.g. when you click on country the country name appears, when I then click a-z the country name(filter) still exists, I want this filter to reset and only the a-z to be active

Okazari Over a year ago

@TomRudge I understood the same thing that doldt (and i would have made it to with with ng-class (ng-class="{'active': predicate == 'attraction', 'reverse': reverse}") till loosing the focus on the button will make the button inactive. But anyway are really sure about the filter issue ?? Actually it just order by one filter at a time. Could you try to detail what you want to achieve ?

Tom Rudge Over a year ago

The active/inactive is just styling, please ignore them as thats not the issue here. Try clicking on "country/state", then click on a-z... the coutry/state filter is still in effect. By clicking one filter I want it to cancel the other that's current

Okazari Over a year ago

@TomRudge Can you update you question to tell us how to know that the filter is still in effect ? (Exemple of how it behave right now vs how it should behave)

Collectives™ on Stack Overflow

Angular ng-click ordering

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related