角ng-click排序

问题描述

Angular的新手，到目前为止很喜欢它。 到目前为止，我已经创建了一个缩略图列表。 我添加了3个排序按钮，通过3个不同的数据值对缩略图进行排序。 一切都很好，但是为了让用户更轻松一些，我想在单击另一个订购按钮时重置/打开一个数据集的订购。 EG-

从小提琴中，您会注意到，当您单击“国家/地区”时，它会变成“国家/地区”；当您单击“ 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>

编辑：

新的提琴手可以删除样式，因此不会造成混淆。

要查看我的问题，请点击“国家/州”-您将通过按国家/地区排序并添加国家/地区名称来查看过滤器的工作。 然后单击“ az”，这将起作用，但是您会注意到“国家/州”的过滤器仍然有效-要删除“国家/州”，您必须再次单击该过滤器按钮。