Ionic-Sammlung-Wiederholung mit Ion-Radio

Question

Ich habe ein Problem mit der Einstellung aktiviert auf ausgewählten Wert mit Icon Sammlung-Wiederholung mit Ion-Radio.

Wenn das ausgewählte Objekt das erste Element in der Liste ist, wird die Einstellung "Wiederholen" aktiviert. Damit es funktioniert, musste ich eine Verzögerung beim Zuweisen von Listendaten machen.

(Wenn ng-repeat verwenden, es funktioniert. Aber die Liste ist lang sein könnte, also muss ich die Sammlung-repeat verwenden)

Beispiel,

Template)

<ion-content class="has-header" ng-controller="Ctrl"> 
    <div class="list"> 
    <ion-radio 
     collection-repeat="item in list" 
     ng-model="selectedItem" 
     ng-value="item.id"> 
     {{ item.n }} 
    </ion-radio> 
    </div> 
</ion-content> 

Controller)

angular.module('starter', ['ionic']) 
.run(function($ionicPlatform) { 
}) 
.controller('Ctrl',function($scope, $timeout) { 

    $scope.selectedItem = 1; // the first item 

    var list = []; 

    for (index = 1; index < 3; ++index) { 
    list.push({id: index, n: 'Item n. ' + index}); 
    } 

    $scope.list = list; 

}); 

Der erste Eintrag der Liste wird nicht geprüft. Damit es funktioniert,

ersetzen

$ scope.list = Liste;

mit

$timeout(function() { 
    $scope.list = list; 
    }, 500); 

Ich möchte wissen, warum es passiert ist, und ich glaube nicht, die 500 ms gewährleistet ist, so muss ich richtig wissen, diese zu lösen. Bitte berate mich.

Answer 1

Es macht durchaus Sinn, dass Sie collection-repeat über ng-repeat verwenden möchten, da die Liste möglicherweise sehr lang sein kann und es unnötig wäre, alle Elemente im DOM gleichzeitig mit ng-repeat zu rendern. Leider ist dies ein known bug innerhalb von Ionic von dem, was ich gelesen habe und die Arbeit um das ist ziemlich hacky. Zum Beispiel funktioniert der Code unten mit der Herstellung aktiv die 2. Radio:

-Controller

.controller('Ctrl',function($scope, $timeout) { 

$scope.data = { 
    selectedItem: 2 
}; 

var list = []; 

for (index = 1; index < 3; ++index) { 
    list.push({id: index, n: 'Item n. ' + index}); 
} 

$scope.list = list; 
}); 

HTML

<ion-content class="has-header" ng-controller="Ctrl"> 
<div class="list"> 
    <ion-radio collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id"> 
    {{ item.n }} 
    </ion-radio> 
</div> 
</ion-content> 

Aber wenn Sie das ausgewählte Element in 1 ändern, nicht wahr Show. Unten finden Sie einen Workaround für das, was Sie suchen. Beginnen Sie Ihre Schleife bei 0 und verstecken Sie dann dieses Element mit CSS (wie ich sagte "hacky"), versuchen Sie es.

-Controller

.controller('Ctrl',function($scope, $timeout) { 

$scope.data = { 
    selectedItem: 1 
}; 

var list = []; 

for (index = 0; index < 5; ++index) { 
    list.push({id: index, n: 'Item n. ' + index}); 
} 

$scope.list = list; 
}); 

HTML

<ion-content class="has-header" ng-controller="Ctrl"> 
<div class="list"> 
<ion-radio 
    collection-repeat="item in list" ng-model="data.selectedItem" ng-value="item.id" item-height="54" item-width="100.5%"> 
    {{ item.n }} 
</ion-radio> 

CSS

.item-radio:first-of-type { 
    display: none; 
} 

.item-radio { 
    margin-top: -54px !important; 
} 

Hoffe das hilft.