-
all
//script
function MessageCenterController($scope, $timeout, $filter) {
'ngInject';
$scope.tabs = [
{
heading: "通知",
messages: [
{
type: 'invitation',
from: {
name: 'Janny'
},
brief: 'say hello',
id: '0001'
},{
type: 'task',
from: {
name: 'Hokinson'
},
brief: 'say hello',
id: '0002'
},{
type: 'invitation',
from: {
name: 'Gray'
},
brief: 'say hello',
id: '0003'
},{
type: 'invitation',
from: {
name: 'Dammy'
},
brief: 'say hello',
id: '0004'
},{
type: 'invitation',
from: {
name: 'Jasmin'
},
brief: 'say hello',
id: '0005'
},{
type: 'invitation',
from: {
name: 'Tommy'
},
brief: 'say hello',
id: '0006'
},{
type: 'invitation',
from: {
name: 'John'
},
brief: 'say hello',
id: '0007'
},{
type: 'invitation',
from: {
name: 'lulu'
},
brief: 'say hello',
id: '0008'
},{
type: 'invitation',
from: {
name: 'May'
},
brief: 'say hello',
id: '0009'
},{
type: 'invitation',
from: {
name: 'Amy'
},
brief: 'say hello',
id: '0010'
},{
type: 'invitation',
from: {
name: 'Kim'
},
brief: 'say hello',
id: '0011'
},{
type: 'invitation',
from: {
name: 'Lily'
},
brief: 'say hello',
id: '0012'
},{
type: 'invitation',
from: {
name: 'Ann'
},
brief: 'say hello',
id: '0013'
}
]
},{
heading: "待处理",
messages: []
}
];
$scope.messageTransform = function($event, message, idx) {
let index, indexInSelected;
switch (idx) {
case 0:
index = findMessageIndex(message.id, $scope.tabs[0].messages);
$scope.tabs[0].messages.splice(index,1);
indexInSelected = findMessageIndex(message.id, selectedMessages);
if(indexInSelected >= 0) {
selectedMessages.splice(index,1);
}
$scope.tabs[1].messages.unshift(message);
break;
case 1:
indexInSelected = findMessageIndex(message.id, selectedPendings);
if(indexInSelected >= 0) {
selectedPendings.splice(index,1);
}
index = findMessageIndex(message.id, $scope.tabs[1].messages);
$scope.tabs[1].messages.splice(index,1);
$scope.tabs[0].messages.unshift(message);
break;
}
};
var selectedMessages = [];
var selectedPendings = [];
$scope.updateChecked = function($event, item, idx) {
let target = angular.element($event.target).siblings('input');
let action = target.attr('checked') ? "remove" : "add";
$scope.updateSelected(action, item, idx);
};
$scope.updateSelected = function(action, selection ,idx) {
let result, index;
switch (idx) {
case 0:
if(action === "add") {
if(selection.constructor === Array) {
for(let i=0;i<$scope.tabs[0].messages.length;i++) {
result = $filter('filter')(selectedMessages, {id: $scope.tabs[0].messages[i].id});
if(result.length == 0) {
selectedMessages.push($scope.tabs[0].messages[i]);
result = undefined;
}
}
} else {
selectedMessages.push(selection);
}
}
else if(action === "remove") {
if(selection.constructor === Array) {
selectedMessages.splice(0, selectedMessages.length);
} else {
for(let i=0;i
整体的功能是这样的:
有左右两个tab页,左边的是“通知”,右边的是“待处理”(即稍后处理的意思)。
通知里的列表项目右上角有个按钮,点击之后该条项目会被移到待处理里;待处理里也同理可以将消息转回通知里。
列表下方有一个全选按钮,能实现全选操作。
问题1:只要鼠标进入li.message-item范围内就不停地触发判断ng-checked,该怎么解决呢?
问题2:触发messageTransform()后,列表项数量马上发生了变化,但是整个列表的高度卡顿了一下才变化。
问题3:触发messageTransform()时,有时候会对其他列表项的ng-checked造成影响。
初学angularjs,函数可能写得惨不忍睹,希望大家多多指教!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号