Список повторов коллекции внутри Ionic Pop Up

У меня есть список повторов коллекции с панелью поиска в верхней части списка (то есть внутри ионного всплывающего тела). На реальном устройстве (Android 4.4) в списке отображается всего 9 записей.

У меня есть codepen, созданный повтор коллекции во всплывающем окне ionic. Здесь он отображает все записи, но не на самом устройстве.

Недавно я обновил 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, например Gecko) версия/4.0 chrome/ 30.0.0 Mobile Safari/537.36."

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

    };

});

Есть ли что-то, что я упускаю. Будьте добры ответьте.

Заранее спасибо :)


ionic-framework hybrid-mobile-app angularjs multi-device-hybrid-apps
person Shashank HS    schedule 07.03.2016    source источник
comment
Эй, просто блуждаю, если ты нашел решение? У меня такая же проблема при использовании повторения коллекции внутри всплывающего окна.   -  person Robbie188    schedule 12.08.2016
comment
Эй, у меня есть решение, которое работает как задумано, но я чувствую, что это неправильный путь. Что я сделал, так это указал высоту для ion-scroll во время выполнения, которая основана на высоте устройства. Я указываю высоту для элемента ion-scroll.   -  person Shashank HS    schedule 16.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, проверьте ссылку ниже. Я сделал всплывающее окно с переключателем и панелью поиска для 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
                    } 
                }
            }]
        });
    }
person abdullah    schedule 24.04.2020