0
Framwwork：離子& Angualr-JS離子離子列表不無龍頭結果顯示/點擊
我在屏幕上兩個搜索文本框所顯示的附加形象。當兩個文本框的值填充後，它將搜索結果並填充數組以顯示在離子列表中。
我面臨的問題是數組被填充，但它沒有更新視圖。 當我點擊或點擊屏幕時，它會顯示帶有預期結果的離子列表，如附圖所示。
同樣的事情發生在其他幾個屏幕上。 我的離子html頁面已變得複雜，因爲我使用相同的html頁面來顯示其他頁面的其他組件。
有很多ng-show & ng-if條件。
HTML代碼
<!-- Source search text-box -->
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Choose starting point..." ng-change="searchSourceStation()" ng-model="data.sourceStation">
</label>
<button class="button button-clear" ng-click="clearSource();">Cancel</button>
</ion-header-bar>
<!-- destination search text-box -->
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Choose destination..." ng-change="searchDestinationStation()" ng-model="data.destinationStation">
</label>
<button class="button button-clear" ng-click="clearDestination();">Cancel</button>
</ion-header-bar>
<ion-content class="has-subheader">
<ion-list class="list has-header">
<!-- to display bus/train list on key press of source and dest textbox -->
<ion-item class="item" ng-repeat="station in data.stations" type="item-text-wrap" ng-click="setSourceOrDestination(station.stationName);">
<p>{{station.stationName}}</p>
</ion-item>
</ion-list>
<div ng-show="showScroll" style="background-color: lightblue;">
<ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="!noData"></ion-infinite-scroll>
</div>
<!-- To Display History of past Search -->
<ion-list class="list has-header" ng-if="showHistory">
<ion-item class="item item-icon-left item-icon-right" ng-repeat="trainHistory in history track by $index" ng-click="setSourceAndDestination('{{trainHistory.trainHistory.sourceStation}}','{{trainHistory.trainHistory.destinationStation}}')" >
<i class="icon ion-ios-clock-outline" style="font-size: 30px"></i>
<p>{{trainHistory.trainHistory.sourceStation }} to {{trainHistory.trainHistory.destinationStation }} </p>
<i class="icon ion-arrow-graph-up-left" style="font-size: 30px" ng-click="filterTrains"></i>
</ion-item>
</ion-list>
<ion-list class="list has-header" ng-if="message">
<ion-item class="item-stable">
<div class="form-error" style="text-align: center;font-size: 14px;">{{message}}</div>
</ion-item>
</ion-list>
<!-- Search result ion-list -->
<ion-list class="list has-header" ng-if="transport.code != 'BUS'">
<!-- this won't get displayed for the attached screenshot -->
<ion-item class="item item-divider item-icon-right" ng-if="showFilter">
<p>Total Trains {{filteredTrain.length}}</p>
<input type="hidden" ng-model="slowFastFlag" />
<a class="icon ion-more" ng-click="popover.show($event)"></a>
<input type="hidden" ng-model="filterText" />
</ion-item>
<div ng-repeat="train in filteredTrain = (data.trains | filter: slowFastFlag)">
<!-- this won't get displayed for the attached screenshot -->
<ion-item class="item-stable" ng-click="toggleGroup(train);" ng-class="{active: isGroupShown(train)}">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td ng-if="train.trainName != null"><h3>{{train.trainName}}</h3></td>
<td style="font-size: 12px;" align="right" ng-if="train.sourceStationArrivalTime"><i class="icon ion-clock"></i>{{" " + train.sourceStationArrivalTime | limitTo: 6 }}</td>
</tr>
<tr>
<td ng-if="train.arrivingIn != null"><p><i class="icon ion-ios-stopwatch"></i><font color="green"> In {{train.arrivingIn }}</font></p></h2></td>
<td style="font-size: 12px;" align="right" ng-if="train.destinationStationArrivalTime != null"><i class="icon ion-clock"></i>{{" " + train.destinationStationArrivalTime | limitTo: 6 }}</td>
</tr>
</table>
</ion-item>
<!-- This is search result. -->
<ion-item class="item-accordion" ng-repeat="station in train.stations" ng-show="isGroupShown(train)" ng-click="toggleGroup(train);">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" style="font-size: 28px;width: 30px;" ng-if="station.lineColour != null">
<i class="ion-android-subway yellow" ng-if="station.lineColour == 'YELLOW'"></i>
<i class="ion-android-subway red" ng-if="station.lineColour == 'RED'"></i>
<i class="ion-android-subway green" ng-if="station.lineColour == 'GREEN'"></i>
<i class="ion-android-subway blue" ng-if="station.lineColour == 'BLUE'"></i>
<i class="ion-android-subway skyBlue" ng-if="station.lineColour == 'SKY_BLUE'"></i>
<i class="ion-android-subway orange" ng-if="station.lineColour == 'ORANGE'"></i>
</td>
<td align="left" valign="middle" style="vertical-align: middle;">
<h3>{{station.stationName}}</h3>
</td>
<td style="font-size: 12px;" align="right" ng-if="station.arrivalTime != null">
<i class="icon ion-clock"></i>{{" " + station.arrivalTime | limitTo: 6 }}
</td>
</tr>
</table>
</ion-item>
</div>
</ion-list>
角-js函數當用戶在兩個文本框
$scope.findUpcomingTrains = function() {
console.log("findUpcomingTrains");
$scope.profile = JSON.parse($window.localStorage['profile']);
var promise = TrainService.findUpcomingTrains($scope.transport.code, $scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
promise.then(function(resp) {
$scope.data.trains = resp.data.trains;
if ($scope.transport.code == 'LOCAL') {
$scope.showFilter = true;
}
$scope.showHistory = false;
if ($scope.data.sourceStation != $scope.data.destinationStation) {
if ($scope.transport.code == 'MONO') {
$scope.addToMonoHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
}
if ($scope.transport.code == 'METRO') {
$scope.addToMetroHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
}
if ($scope.transport.code == 'LOCAL') {
$scope.addToLocalHistory($scope.data.sourceStation, $scope.data.destinationStation, $scope.profile.city);
}
}
if (resp.data.message) {
$scope.message = resp.data.message;
} else {
}
}, function(resp) {
console.log("ERROR : " + resp);
})
console.log("findUpcomingTrains : $scope.$apploy() called")
}
還有一個觀察結果是，進入值呼叫這個問題只發生在用戶使用ion-infinite-scroll，這意味着嘗試向下滾動，並調用無限滾動的loadMore（）函數。
下面是我loadMore功能
$scope.loadMore = function() {
$scope.dataToLoad = 15;
console.log("******* loadmore() ******* : No Data : " + $scope.noData);
if (angular.isUndefined($scope.data.stations)) {
console.log("$scope.data.stations is undefined...");
$scope.noData = false;
$scope.$broadcast('scroll.infiniteScrollComplete');
return;
}
console.log("loadMore : $scope.data.filteredStations : " + $scope.data.stations.length + " , $scope.dataToLoad " + $scope.dataToLoad);
$scope.data.stations = $scope.data.filteredStations.slice(0, ($scope.data.stations.length + $scope.dataToLoad));
if ($scope.data.stations.length == $scope.data.filteredStations.length) {
$scope.noData = true;
} else {
$scope.noData = false;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
}
您可以請您發佈一小段HTML，然後還可以使用這個控制器嗎？ – theblindprophet
看看這個 - http://www.sitepoint.com/understanding-angulars-apply-digest/ – ansario
我已經爲你添加了評論。 –