Ionic Pop Up 中的集合重复列表

Question

我有一个集合重复列表，列表顶部有一个搜索栏（即在离子弹出主体内）。在真实设备（Android 4.4）上，列表仅显示 9 条记录。

我创建了一个代码笔 collection repeat inside ionic pop up. 在这里它显示所有记录，但不在实际设备上。

最近我从 Ionic 1.1.1 更新到 Ionic 1.2.4 。是不是因为新的 Ionic 版本有问题，我也尝试了 Ionic 1.2.4 的每晚构建它也可以工作。

手机浏览器版本是否有差异，我手机浏览器版本是“Mozilla/5.0(Linux 4.4.2; en-us; 6043D Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) 版本/ 4.0 chrome/30.0.0 移动版 Safari/537.36."

这是 ionic 弹出窗口的 HTML 代码。

<div class="list list-inset" ng-style="{ 'display': 'inline-flex', 'padding': '0'}">
  <label class='item item-input' ng-style='{ 'border-right-color': '#FFFFFF'}'>
    <i class='icon icon-left ion-ios7-search placeholder-icon''></i>
    <input type='text' ng-model='search' placeholder='Search'>
  </label>
  <a class='button button-icon icon ion-ios7-close-empty placeholder-icon'
    ng-style='{ 'color': '#B83E2C' }'
    on-touch='clearSearch()''>
  </a>
</div>
<div class='listPopUpHeight'>
  <ion-scroll direction="y" class="available-scroller" style="height:350px">
    <ion-list>
      <ion-item 
        class="dataSourceItem" 
        collection-repeat="item in dataSource | filter:search"
        collection-item-width="100%" 
        item-height="15%" 
        on-tap="tapped(item)">
          {{item.Text}}
      </ion-item>
    </ion-list>
  </ion-scroll>
</div>

这里是JS代码：

angular.module('ionicApp', ['ionic'])
  .controller('PopupCtrl', function($scope, $ionicPopup, $timeout) {

    $scope.dataSource = [];

    $scope.showList = function(){
      var list=[];

      for (var i = 0; i < 1000; i++) {
        list.push({ 'Id': i, 'Text': 'Text_' + i });
      }

      $scope.dataSource = list;

      var listPopup = $ionicPopup.show({
        templateUrl: 'popupTemplate.html',
        title: 'List',
        scope: $scope,
        buttons: [
          { text: 'Cancel' },
        ]
      });

    };

});

我有什么遗漏的吗？请回复。

提前谢谢:)

Answer 1

请检查以下链接。我制作了一个带有 Ionic v1 搜索栏的单选按钮弹出窗口。

https://codepen.io/engabdalb/pen/LYpWbZa

HTML

  <a class="item" ng-click="open('aracyakit.html')">
           Yakıt
           <span style="color:#0097A4" style="color:#0097A4" class="item-note" >
               {{arackayit.araba_yakit}}
           </span>
       </a>
        <script id='aracyakit.html' type='text/ng-template'>
            <label class="item item-input">
       <i class="icon ion-search placeholder-icon"></i>
       <input type="text" ng-model="arama" placeholder="Arama">
       </label>
            <ion-radio name="araba_yakit" id="araba_yakit" ng-repeat="ay in arabayakitlari  | filter:arama" class="wrapping-list" ng-model="arackayit.araba_yakit" ng-value="'{{ay.value}}'">{{ay.name}}</ion-radio>
        </script>


        <a class="item" ng-click="open('aracvites.html')">
           Vites
           <span style="color:#0097A4" style="color:#0097A4" class="item-note" >
               {{arackayit.araba_vites}}
           </span>
       </a>
        <script id='aracvites.html' type='text/ng-template'>
            <label class="item item-input">
       <i class="icon ion-search placeholder-icon"></i>
       <input type="text" ng-model="arama" placeholder="Arama">
       </label>
            <ion-radio name="araba_vites" id="araba_vites" ng-repeat="av in arabavitesleri  | filter:arama" class="wrapping-list" ng-model="arackayit.araba_vites" ng-value="'{{av.value}}'">{{av.name}}</ion-radio>
        </script>

CSS

.popup-body {
    padding: 10px;
    overflow: auto;
    width: 100%;
}

.popup-open .popup-backdrop,
.popup-open .popup {
    pointer-events: auto;
    width: 100%;
}

.popup-head {
    padding: 0px 0px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

JS

 $scope.arackayit = [];
   $scope.arabavitesleri = [
        { value: "Otomatik", name: "Otomatik" },
        { value: "Manuel", name: "Manuel" }
    ]

    $scope.arabayakitlari = [
        { value: "Dizel", name: "Dizel" },
        { value: "Benzin", name: "Benzin" },
        { value: "Benzin-LPG", name: "Benzin-LPG" }
    ]


  $scope.open = function(clicked) {

        $ionicPopup.confirm({
            templateUrl: clicked,

            scope: $scope,
            buttons: [{
                text: 'Iptal',
                type: 'button-default',
                onTap: function(e) {
                  // Change/ write here current page
                  $state.go('tab.aracekle');
                }
            }, {
                text: 'Tamam',
                type: 'button-positive',
                onTap: function(e) {
              //open next when OK clicked   
                     switch (clicked) {
                        case 'aracyakit.html':               
                       $scope.open('aracvites.html');
                            break;
                      //Do nothing when OK clicked      
                        case 'aracvites.html':
                        default:
                            // code block
                    } 
                }
            }]
        });
    }