使用AngularJS在ng-options中订购选项

时间:2016-06-15 15:04:30

标签: javascript html angularjs

下面显示的select元素填充了Angular 1.47(代码也显示)。我希望当前值-45 bp - 位于列表的顶部,而不是底部。我怎么能做到这一点?

My dropdown

  <div class="modal-content">
      <div class="modal-header edit-modal" style="border-style: solid; border-width: 1px;">
        <button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
        <div>Test Dialog </div>
      </div>
      <div class="modal-body">
        <form class="form-horizontal ng-pristine ng-valid" role="form">
             <div class="row edit-modal">
                <div class="col-sm-1"></div>
                <div class="col-sm-5 text-left label-no-padding">Option  1</div>
                <div class="col-sm-5">
                 <select style="width:150px" ng-model="Option1" ng-options="Option1 as Option1.label for Option1 in dropdown.Option1 | orderBy:'orderId'" class="ng-pristine ng-valid ng-touched"></select>
                </div>
                <div class="col-sm-1"></div>
            </div>  
            <div class="row edit-modal">
                <div class="col-sm-1"></div>
                <div class="col-sm-5 text-left label-no-padding">Option 2</div>
                <div class="col-sm-5">
                 <select style="width:150px" ng-model="Option2" ng-options="Option2 as Option2.label for Option2 in dropdownValueMap.Option2| orderBy:'orderId'" class="ng-pristine ng-untouched ng-valid"></select>
                </div>
                <div class="col-sm-1"></div>
            </div>  
            <div class="row edit-modal">
                <div class="col-sm-1"></div>
                <div class="col-sm-5 text-left label-no-padding">Option 3</div>
                <div class="col-sm-5">
                <select style="width:150px" ng-model="Option3" ng-options="Option3 as Option3.label for Option3 in dropdown.Option3 | orderBy:'orderId'" class="ng-pristine ng-untouched ng-valid"></select>
                </div>
                <div class="col-sm-1"></div>
            </div>  
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" ng-click="closeSave()" class="btn btn-primary" data-dismiss="modal">OK</button>
        <button type="button" ng-click="close()" class="btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>

1 个答案:

答案 0 :(得分:2)

我看到您正在使用orderBy过滤器。

  • 如果您使用orderBy:'orderId',订单会增加(27,28,29,30)。
  • 如果您使用orderBy:'-orderId',则订单下降(30,29,28,27)。

请查看:https://docs.angularjs.org/api/ng/filter/orderBy

希望我帮助过:)