ng-repeatを使用して条件にオプションを表示する方法

Question

ng-repeatを使用して最初のオプションのみを表示する方法を知りたいのですが、他のオプションはボタンに依存することになります。

My code here: 
http://plnkr.co/edit/oxtojjEPwkKng9iKkc14?p=preview 

私は、他のオプションがつもり、隠されている最初のオプション、第1の選択や入力を表示したいと私はボタンをクリックすると、オプションがゴナが表示されている、私は、内のすべてのオプションを保存するgointています配列、私はオブジェクトとしてオプションを保存します。

userOp = [{}]; 

NGリピートの制限が選択できるオプションの数、私は何が必要に理解している場合、ユーザはすべてのdiferentsオプション

Answer 1

を選択することができますこの方法で、あなたが持っている可能性があり表示するすべてのオプションを持つ配列と、空になり、ビューにフィードする配列。ユーザーがオプションを選択すると、新しいステップが2番目の配列にプッシュされます。

コントローラ

function OptionsCtrl($scope) { 
    $scope.options = [ 
    {text:'learn angular', select:['option1', 'option2', 'option3']}, 
    {text:'build an angular app', select:['another1', 'another2', 'another3', 'another4']}, 
    {text:'build an angular app', select:['onemore1', 'onemore2']} 
    ]; 

    $scope.showNextOption = function(){ 
    var nextIndex = $scope.visibleOptions.length; 
    if($scope.options.length > nextIndex) 
    { 
     $scope.results.push({input:'',select:''}); 
     $scope.visibleOptions.push($scope.options[nextIndex]); 
    }else{ 
     // you can call $scope.save() here if you wish to save when the options have been presented 
     // or just use the save button 
     console.log('save'); 
    } 
    }; 

    $scope.save = function() { 
    //do whatever you need with $scope.results 
    $scope.reset(); 
    } 

    $scope.reset = function() { 
     $scope.visibleOptions = []; 
    $scope.results = []; 
     $scope.showNextOption(-1); 
    } 

    $scope.reset(); 

} 

ビュー

<div ng-app> 
    <h2>Options</h2> 
    <div ng-controller="OptionsCtrl"> 
    <form ng-submit="showNextOption()"> 
     <ul class="unstyled"> 
     <li ng-repeat="(index, option) in visibleOptions"> 
      <input type="text" ng-model="results[index]['input']" required> 
      <select ng-model="results[index]['select']" required> 
      <option value="">select</option> 
      <option ng-repeat="select in option.select" value="{{select}}">{{select}}</option> 
      </select> 
      <button 
      type="submit" 
      ng-show="visibleOptions.length == index+1 && visibleOptions.length < options.length">Next</button> 
     </li> 
     </ul> 
    </form> 
    <button 
      ng-click="save()" 
      ng-show="visibleOptions.length == options.length">Save</button> 
    <br><br> 
    {{ 
    results 
    }} 
    </div> 
</div> 

example here