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/新的小提琴可以消除造型，因此不会混淆。

要查看我的问题，请点击“国家/州/地区” - 您会看到过滤器按国家/地区排序并添加国家/地区名称。然后单击“a-z”这样可行但是您会注意到“国家/州”的过滤器仍然有效 - 为了删除“国家/州”，您必须再次单击该过滤器按钮。

角度ng-click排序

0 个答案: