Question

我使用Icon collection-repeat with ion-radio设置选中的值时遇到问题。

使用集合重复，如果所选项目是列表中的第一项，则选中的设置将不起作用。为了使它工作，我发现，我需要延迟分配列表数据。

（如果使用ng-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 = list;

与

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

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

Answer 1

完全可以理解你要使用集合重复而不是ng-repeat，因为列表可能很长，并且不需要使用ng-repeat一次渲染DOM中的所有项目。不幸的是，这是我在Ionic中读到的 known bug ，并且对此工作非常苛刻。例如，下面的代码可以激活第二个无线电：

<强>控制器

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

希望这有帮助。

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

1 个答案: