2016-04-12 14 views
1

ng-yinelemeyi nasıl kullanacağınızı ve yalnızca ilk seçeneği nasıl kullanacağımı bilmek istiyorum, diğeri bir düğmeye bağımlı olacak.ng-yineleme ve durum seçenekleriyle koşullar nasıl kullanılır?

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

ben, başka seçenekler olacak, gizlenebilir ilk seçenek, ilk seçme ve giriş göstermek istiyorum ve i düğmesine tıklarsanız, opsiyon gona görünür, ben bir bütün kaydet seçeneğini goint duyuyorum dizi, seçenekleri nesne olarak kaydedeceğim.

userOp = [{}]; 

ng-tekrarlama sınırı seçilebilir seçeneklerinin sayısı, kullanıcı tüm diferents seçenekleri

Neye ihtiyacın olduğu anlaşılan ettiyseniz

cevap

0

seçebilirsiniz bu şekilde, bir olabilir Göstermek istediğiniz tüm seçenekler ve boş olan ve görünümü besleyen başka bir dizi içeren diziler. Kullanıcınız seçenekleri seçtikçe yeni adımı ikinci diziye aktarırsınız.

Kontrolör

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(); 

} 

Görünüm

<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

İlgili konular