离子收集 - 用离子收音机重复拍摄

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

希望这会有所帮助。