[英]ionic - swapping elements in an ion-list
我有一個離子列表顯示使用ng-repeat的用戶列表。 我想做的是,每當收到通知時,將其中一位用戶從他的位置移到頂部,就像在whatsapp聊天中收到消息時一樣。 傳遞到列表的數組是在控制器中定義的,如下面的代碼所示。
listUsers.html:
<ion-view title="listaUsers" can-swipe-back="true">
<ion-content overflow-scroll="true" padding="false" scroll="true" class="has-header">
<ion-list ng-repeat="session in listUsers">
<a class="item item-avatar" href="#/app/profile/listUsers/chat/{{session.id}}">
<img ng-src="http://sviluppo.asuscomm.com:43280/mob/ionic/immagini_{{session.social}}/{{session.id}}.jpg" err-SRC="img/default-user.png" />
<h2>{{session.nome}} - {{session.cognome}}</h2>
<p>{{session.messaggio}}</p>
<div ng-if="session.in_out_struttura == 1">
<span class="badge badge-balanced">SI</span>
</div>
<div ng-if="session.in_out_struttura == 0">
<span class="badge badge-assertive">NO</span>
</div>
</a>
</ion-list>
</ion-content>
</ion-view>
listUsers.js:
angular.module('app.controllers')
.controller('listUsersCtrl', function ($scope, $http, $rootScope, $ionicLoading) {
$scope.listUsers = [];
/*Some function will put the data into $scope.listUsers,
every element will be a JSON object like this:
{
id: 1,
nome: "John",
cognome: "Doe",
social: "F",
messaggio: "Some Message"
}
*/
//This function removes the record to move from the array and puts it back into it in first position
$scope.putOnTop = function (id_usr, message) {
for (var x = 0; x < $scope.listUsers.length; x++) {
if ($scope.listUsers[x].id == id_usr) {
var record = $scope.listUsers.splice(x, 1)[0];
record.messaggio = message;
$scope.listUsers.unshift(record);
break;
}
}
}
//This listens to a custom event emitted from app.js
$rootScope.$on("putUserOnTop", function (event, id_usr, message) {
$scope.putOnTop(id_usr, message);
});
})
app.js:
//This is just a part of the original app.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'pascalprecht.translate', 'ngCordova', 'ngCordovaOauth', 'ionic-datepicker'])
.run(function ($ionicPlatform, $translate, $http, $state, $ionicHistory, $rootScope, $cordovaNetwork) {
//...
$ionicPlatform.ready(function () {
//...
try {
var push = PushNotification.init({
android: {
senderID: "XXXXXXXXXX"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
});
} catch (e) {
console.log("ERROR PUSH NOTIFICATION : " + e);
}
try {
push.on('registration', function (data) {
localStorage.setItem("registrationId", data.registrationId);
});
push.on('notification', function (data) {
var senderId = data.additionalData.senderId;
var destId = data.additionalData.destId;
var message = data.additionalData.messaggio;
//Checking if the app was in foreground, background or not running
if (data.additionalData.coldstart !== undefined) {
//THE WAS NOT IN FOREGROUND
if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
$rootScope.$emit("putUserOnTop", senderId, message);
} else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
//...
} else {
//...
}
} else {
//THE APP WAS IN FOREGROUND
$rootScope.$emit("putUserOnTop", senderId, message);
//...
}
});
push.on('error', function (e) {
//...
});
} catch (e) {
console.log("ERROR : " + e);
}
//...
})
.config(...);
問題是,如果我運行此代碼,記錄將不會在列表中移動,並且控制台中不會顯示任何錯誤。 如果我putOnTop
使用按鈕運行putOnTop
函數,它實際上可以正常工作。 我想念什么?
謝謝。
編輯:
我還嘗試使用$cordovaPushV5
代替PushNotification
,相應地修改了代碼,但是沒有任何變化,相同的行為。 以下是更新的app.js :
//This is just a part of the original app.js
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'pascalprecht.translate', 'ngCordova', 'ngCordovaOauth', 'ionic-datepicker'])
.run(function ($ionicPlatform, $translate, $http, $state, $ionicHistory, $rootScope, $cordovaNetwork, $cordovaPushV5) {
//...
$ionicPlatform.ready(function () {
//...
$cordovaPushV5.initialize({
android: {
senderID: "XXXXXXXXXX"
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
}).then(function() {
// start listening for new notifications
$cordovaPushV5.onNotification();
// start listening for errors
$cordovaPushV5.onError();
// register to get registrationId
$cordovaPushV5.register().then(function(registrationId) {
localStorage.setItem("registrationId", registrationId);
});
});
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data){
var senderId = data.additionalData.senderId;
var destId = data.additionalData.destId;
var message = data.message;
var timestamp = data.additionalData.timestamp;
if (data.additionalData.coldstart !== undefined) {
if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
$rootScope.$emit("putUserOnTop", [senderId, message, timestamp]);
} else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
$rootScope.$emit("getMessages", {
senderId: senderId,
destId: destId
});
} else {
$state.go("app.chat", {
userId: senderId
});
}
} else {
if ($ionicHistory.currentView().url == "/app/profile/listUsers") {
$rootScope.$emit("putUserOnTop", [senderId, message, timestamp]);
} else if ($ionicHistory.currentView().url == "/app/profile/listUsers/chat/" + senderId) {
$rootScope.$emit("getMessages", {
senderId: senderId,
destId: destId
});
}
}
});
// triggered every time error occurs
$rootScope.$on('$cordovaPushV5:errorOcurred', function(event, e){
//...
});
//...
})
.config(...);
問題在於您從$rootScope.$on
獲取參數的方式。 參數將在第二個參數中,如下所示:
$rootScope.$on("putUserOnTop", function (event, args) {
var id_usr = args.id_usr;
var message = args.message;
$scope.putOnTop(id_usr, message);
});
一個簡單的方法是使用角度過濾器: orderBy 。 特別是,您可以在項目上設置一個更新的date屬性,然后在desc模式下按它進行過濾。 例如:
設置過濾器
<ion-list ng-repeat="session in listUsers | orderBy: '-updated_at'">
設置updated_at
$rootScope.$on("putUserOnTop", function (event, id_usr, message) {
var user = $scope.listUsers.find(function() {
return user.id == id_usr;
});
user.updated_at = new Date();
});
orderBy
過濾器本質上將使用updated_at
屬性對商品進行重新排序,因此,每次收到消息時,您都可以設置此時間戳來更新您的收藏順序。
好的,只是報告說,我需要做的就是放$scope.$apply();
在putOnTop
函數中,如下所示:
$scope.putOnTop = function (id_usr, message) {
for (var x = 0; x < $scope.listUsers.length; x++) {
if ($scope.listUsers[x].id == id_usr) {
var record = $scope.listUsers.splice(x, 1)[0];
record.messaggio = message;
$scope.listUsers.unshift(record);
$scope.$apply() //<============================
break;
}
}
}
謝謝大家的幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.