离子收集重复与离子无线电

Question

我在使用 Icon collection-repeat with ion-radio 检查选定值时遇到问题。

使用collection-repeat，如果选中的项目是列表中的第一个项目，设置checked 将不起作用。我发现，为了让它工作，我需要延迟分配列表数据。

（如果使用ng-repeat，它可以工作。但是列表可能很长，所以我需要使用collection-repeat）

例子，

模板）

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

我想知道它为什么会发生，我不认为 500ms 是有保证的，所以我需要知道解决这个问题的正确方法。请给我建议。

Answer 1

你想使用 collection-repeat 而不是 ng-repeat 是完全有道理的，因为列表可能很长，并且没有必要使用 ng-repeat 一次渲染 DOM 中的所有项目。不幸的是，这是我读过的 Ionic 中的 known bug ，而解决这个问题的方法非常hacky。例如，下面的代码可以激活第二个收音机：

控制器

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

希望这会有所帮助。