離子收集 - 用離子收音機重複拍攝

Question

我在使用圖標收藏 - 使用離子收音機重複檢查選定值時遇到問題。

使用collection-repeat，如果所選項目是列表中的第一個項目，則選中設置將不起作用。爲了使它工作，我發現，我需要延遲分配列表數據。

（如果使用NG-重複，它的作品。不過這個名單可以很長，所以我需要使用集合重複）

例，

模板）

<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> 

控制器）

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; 

}); 

該列表的第一項不會被檢查。爲了使工作，

更換

$ scope.list =列表;

與

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

我想知道爲什麼會發生，我不認爲500毫秒的保證，所以我需要知道解決這個正確的方法。請指教我。

Answer 1

由於列表可能會很長，因此您希望使用collection-repeat over ng-repeat是完全有意義的，並且不需要使用ng-repeat一次性渲染DOM中的所有項目。不幸的是，這是一個known bug在離子從我已經閱讀和工作，這是很hacky。例如下面的代碼，是用做積極的第2電臺：

控制器

.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> 

但是，當您更改所選項目到1，這不顯示。以下是您正在尋找的解決方法。在0處開始循環，然後使用CSS隱藏該項目（如我所說的「hacky」），試試看。

控制器

.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; 
} 

希望這會有所幫助。