角ng-click排序

Question

Angular的新手，到目前為止很喜歡它。 到目前為止，我已經創建了一個縮略圖列表。 我添加了3個排序按鈕，通過3個不同的數據值對縮略圖進行排序。 一切都很好，但是為了讓用戶更輕松一些，我想在單擊另一個訂購按鈕時重置/打開一個數據集的訂購。 EG- https://jsfiddle.net/5wayfc4z/

從小提琴中，您會注意到，當您單擊“國家/地區”時，它會變成“國家/地區”；當您單擊“ az”時，它將按吸引力對數據進行排序，但仍會顯示“國家/地區”排序-請關閉此功能以再次單擊國家。 如果可以的話，我只想一次對一個字段進行排序？

            <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>

編輯：

https://jsfiddle.net/5wayfc4z/新的提琴手可以刪除樣式，因此不會造成混淆。

要查看我的問題，請點擊“國家/州”-您將通過按國家/地區排序並添加國家/地區名稱來查看過濾器的工作。 然后單擊“ az”，這將起作用，但是您會注意到“國家/州”的過濾器仍然有效-要刪除“國家/州”，您必須再次單擊該過濾器按鈕。

Answer 1

排序似乎對您的提琴效果很好，所以這只是視覺問題嗎？ 只需從按鈕中刪除初始狀態：

class="btn btn-primary btn-block"

而不是默認情況下添加active或inactive 。

我已付出你的小提琴與修復： 提琴