使用带有排序和自定义文本的 ng-option

Question

我有以下 ng-repeat:

<select class="action-dropdown fade" ng-model="item_value">
    <option value="" disabled>Choose an Step</option>
    <option ng-repeat="step in steps | orderBy:'+step_number'" ng-if="step.step_number >= active_step" value="{{$index}}">Step {{step.step_number}}</option>
</select>

我正在尝试将其更改为 ng-option，因为会弹出以下选项，我认为这可能会解决问题：

<option value="? string:5 ?"></option>

我正在努力思考如何将我的 ng-if 语句包含在 ng-option 中并使用 Step $index 这个词显示选项时。

理解表达让我大吃一惊，我想知道是否有人可以帮助我。

这是我目前拥有的：

<select class="action-dropdown fade" ng-model="item_value" ng-options="$index as step.step_number for step in steps" required>
    <option value="" disabled>Choose a Step</option>
</select>

Answer 1

看我评论的截图

I think that the best way (cleaner way) is populate the steps list on change active_step. To access the index you can use the (key,value) syntax

select as label for (key , value) in object

文档：https://docs.angularjs.org/api/ng/directive/ngOptions

angular.module('app', [])
.controller('DefaultController', function () {
    this.item_value = null;
    this.steps = [ 
        { step_number: 5 }, 
        { step_number: 2 },  
        { step_number: 6 },
        { step_number: 3 },
     { step_number: 1 }, 
        { step_number: 4 },
    ]
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div data-ng-controller="DefaultController as ctrl">
    <select ng-model="ctrl.item_value" ng-options="step as 'Step ' + index for (index, step) in ctrl.steps | orderBy:'+step_number'" required>
    <option value="" disabled>Choose a Step</option>
</select>
    
    Selected: {{ ctrl.item_value }}
  </div>
</div>

使用带有排序和自定义文本的 ng-option

Using ng-option with sorting and custom text

angularjs

ng-options