我有一个收集重复列表,列表顶部有一个搜索栏(位于离子弹出体内)。在实际设备(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; zh-cn; 6043D Build / KOT49H)AppleWebKit / 537.36(KHTML,如Gecko)版本/4.0 chrome / 30.0.0移动版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 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
}
}
}]
});
}