<div ng-controller="MessageCenterController">
<uib-tabset>
<!-- start: tab -->
<uib-tab heading="{{tab.heading}}" index=$index ng-repeat="tab in tabs">
<div class="message-list">
<ul class="list-unstyled no-margin clearfix">
<!-- start: message item -->
<!-- Attention! track by $index below will bring some bug -->
<li class="message-item" ng-repeat="message in tab.messages track by message.id">
<div class="reference">
<div class="pull-left">
<div class="checkbox clip-check check-primary check-sm checkbox-inline">
<input type="checkbox" ng-checked="isSelected(message.id,$parent.$index)">
<label ng-click="updateChecked($event,message,$parent.$index)"></label>
</div>
</div>
<div class="pull-left">
<div class="messager-name one-line-text" ng-bind="message.from.name"></div>
<div class="message-brief one-line-text" ng-bind="message.brief"></div>
<div class="message-brief one-line-text" ng-bind="message.id"></div>
</div>
<div class="message-option pull-right" style="margin-right: 30px;">
<span class="pull-left" ng-click="messageTransform($event,message,$parent.$index)">
<i class="glyphicon glyphicon-bookmark" ng-if="$parent.$index == 0"></i>
<i class="glyphicon glyphicon-flag" ng-if="$parent.$index == 1"></i>
</span>
</div>
</div>
</li>
<!-- end: message item -->
</ul>
</div>
<div class="bottom-message-option">
<ul class="no-margin list-unstyled no-padding clearfix">
<li class="">
<div class="inline-block">
<div class="pull-left">
<div class="display-table-cell vertical-align-middle">
<div class="chipcoo-ui">
<div class="checkbox clip-check check-primary">
<input type="checkbox" ng-checked="isAllSelected($index)" />
<label ng-click="updateChecked($event,tab.messages,$index)"></label>
</div>
</div>
</div>
</div>
<span translate="message.center.selectAll">all</span>
</div>
</li>
</ul>
</div>
</uib-tab>
<!-- end: tab -->
</uib-tabset>
</div>
//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<selectedMessages.length;i++) {
if(selectedMessages[i].id == selection.id) {
index = i;
break;
}
}
selectedMessages.splice(index,1);
}
}
break;
case 1:
if(action === "add") {
if(selection.constructor === Array) {
for(let i=0;i<$scope.tabs[1].messages.length;i++) {
result = $filter('filter')(selectedPendings, {id: $scope.tabs[1].messages[i].id});
if(result.length == 0) {
selectedPendings.push($scope.tabs[1].messages[i]);
result = undefined;
}
}
} else {
selectedPendings.push(selection);
}
}
else if(action === "remove") {
if(selection.constructor === Array) {
selectedPendings.splice(0, selectedPendings.length);
} else {
for(let i=0;i<selectedPendings.length;i++) {
if(selectedPendings[i].id == selection.id) {
index = i;
break;
}
}
selectedPendings.splice(index,1);
}
}
break;
}
};
$scope.isSelected = function(id, idx) {
let result;
switch (idx) {
case 0:
result = $filter('filter')(selectedMessages, {id: id});
if(result.length === 0) {
return false;
} else {
return true;
}
break;
case 1:
result = $filter('filter')(selectedPendings, {id: id});
if(result.length === 0) {
return false;
} else {
return true;
}
break;
}
};
$scope.isAllSelected = function(idx) {
switch (idx) {
case 0:
if(selectedMessages.length == $scope.tabs[0].messages.length && selectedMessages.length != 0) return true;
else return false;
break;
case 1:
if(selectedPendings.length == $scope.tabs[1].messages.length && selectedPendings.length != 0) return true;
else return false;
break;
}
};
function findMessageIndex(id, messages) {
for(let i=0; i<messages.length; i++) {
if(messages[i].id === id) {
return i;
}
}
return -1;
}
}整体的功能是这样的：
有左右两个tab页，左边的是“通知”，右边的是“待处理”（即稍后处理的意思）。
通知里的列表项目右上角有个按钮，点击之后该条项目会被移到待处理里；待处理里也同理可以将消息转回通知里。
列表下方有一个全选按钮，能实现全选操作。
问题1：只要鼠标进入li.message-item范围内就不停地触发判断ng-checked，该怎么解决呢？
问题2：触发messageTransform()后，列表项数量马上发生了变化，但是整个列表的高度卡顿了一下才变化。
问题3：触发messageTransform()时，有时候会对其他列表项的ng-checked造成影响。
初学angularjs，函数可能写得惨不忍睹，希望大家多多指教！