Collection repeat list inside Ionic Pop Up

Question

I have a collection repeat list with a search bar on top of the list (that is inside ionic pop up body). On the real device (Android 4.4), the list displays only 9 records.

I have a codepen created collection repeat inside ionic pop up. Here it displays all the records, but not on the actual device.

Recently I updated from Ionic 1.1.1 to Ionic 1.2.4 . Is it a problem because of the new Ionic version, I also tried Ionic 1.2.4's nightly build it also dint work.

Does the phone's browser version cause a difference, My phone's browser version is "Mozilla/5.0(Linux 4.4.2; en-us; 6043D Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) version/4.0 chrome/ 30.0.0 Mobile Safari/537.36."

Here is the HTML code of the ionic pop up.

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

Here is the JS code:

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' },
        ]
      });

    };

});

Is there something I am missing out. Kindly do reply.

Thanks in advance :)

Answer 1

Please check below link. I made a popup with radio button with searchbar for 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
                    } 
                }
            }]
        });
    }