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/新小提琴可消除样式,因此不会造成混淆。
要查看我的问题,请点击“国家/州”-您将看到按国家/地区排序并添加国家/地区名称的过滤器工作。然后单击“ a-z”,这将起作用,但是您会注意到“国家/州”的过滤器仍然有效-要删除“国家/州”,您必须再次单击该过滤器按钮。
最佳答案
排序似乎对您的提琴效果很好,所以这只是视觉问题吗?
只需从按钮中删除初始状态:
class="btn btn-primary btn-block"
而不是默认添加
active
或inactive
。我已将修复程序分给您的小提琴:fiddle