角ng-click排序

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 "az" 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 "az" 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.

Answer 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