Использование нг-вариант сортировки и пользовательский текст

Question

У меня есть следующий нг-повтор:

<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-option и использовать слово Шаг $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

выглядят пропущено, как я заметил

Я думаю, что лучший способ (способ очистки) является заполнить список шагов по изменению active_step. Чтобы получить доступ к индексу можно использовать (ключ, значение) синтаксис

select as label for (key , value) in object 

Doc: 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 }, 
 
    \t { 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>