Javascript 角单击排序

新来的棱角，到目前为止喜欢它。到目前为止，我已经创建了一个缩略图列表。我添加了3个排序按钮，按3个不同的数据值对缩略图进行排序。所有这些都很好，但为了让用户不那么困惑，我想在单击另一个订单按钮时重置/打开一个数据集的订单。例如

从小提琴上你会注意到，当你点击国家时，它会变成“国家”，当你点击“a-z”时，它会按吸引力对数据进行排序，但“国家”排序仍会显示-要关闭此功能，我需要再次点击国家。如果有意义的话，我只想一次对一个字段进行排序

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

新的小提琴，以消除造型，所以它不会混淆

要查看我的问题，请单击“国家/州”-您将看到按国家排序并添加国家名称的过滤器工作。然后点击“a-z”按钮，该按钮起作用，但您会注意到“国家/州”的过滤器仍然有效-要删除“国家/州”，您必须再次点击该过滤器按钮
 在您的小提琴中，排序似乎工作正常，所以这只是一个视觉问题吗？
只需从按钮中删除初始状态：

class="btn btn-primary btn-block"

而不是在默认情况下添加
active
或
inactive

我用叉子叉了你的小提琴：嗨。谢谢你的回复。我想你可能误解了。当我单击一个按钮时，我希望上一个过滤器不起作用（或被删除），例如，当你单击国家时，国家名称出现，当我单击a-z时，国家名称（过滤器）仍然存在，我希望此过滤器复位，并且只显示a-zactive@TomRudge我理解的和多尔特一样（我会用ng类（ng class=“{'active'：predicate=='attraction'，'reverse'：reverse}）来实现它）直到松开按钮上的焦点将使按钮处于非活动状态。但无论如何，您确实确定过滤器问题？？实际上它只是一次按一个过滤器订购。您能否尝试详细说明您想要实现的目标？活动/非活动只是样式，请忽略它们，因为这不是问题所在。尝试单击“国家/州”，然后单击a-z…国家/州过滤器仍然有效。通过单击一个过滤器，我希望它取消另一个无效的过滤器current@TomRudge您是否可以更新您的问题，告诉我们如何知道过滤器仍然有效？（例如，它现在的行为与应该的行为）你真的像小提琴一样使用Angular 1.1.x吗？如果不了解你的测试数据，就很难看到准确的错误现象：当国家/州过滤器生效时，你希望看到什么列表？当它不生效时，你希望看到什么列表？（也许我们可以使测试数据数组更小？）当国家/州过滤器生效时，您会看到国家名称出现。我希望当按下另一个过滤器时，此过滤器消失。