angular js 左右选择框 Freemarker+js

Freemarker：
<div class="form-group">
<label for="summary" class="col-sm-2 control-label">相关艺人选择</label>
<div class="col-sm-4" >
<ul class="list-group" style ="border:solid 1px #ccc;border-radius: 4px;width:280px;height:320px; overflow:auto;" id = "can">
<li class="list-group-item" data-ng-repeat = "row in artistleft track by $index" id = "can{{$index}}" data-ng-click = "canClick($index)">{{row.artistNameC}}</li>

</ul>
</div>
<div class="col-sm-1">
<button type="button" style = "margin-top:80px;margin-left:-15px;'" class="btn btn-primary btn-width-default" data-ng-click = "select()">＜</button>
<button type="button" style = "margin-left:-15px;margin-top:20px;'" class="btn btn-primary btn-width-default" data-ng-click = "cancel()">＞</button>
</div>
<div class="col-sm-4" id="index" >
<ul class="list-group" style ="border:solid 1px #ccc;border-radius: 4px;width:280px;height:320px; overflow:auto;" id ="sel">
<li class="list-group-item" data-ng-repeat = "row in artistAll track by $index" id ="sel{{$index}}" data-ng-click = "selClick($index)">{{row.artistNameC}} </li>
<!-- <li class="list-group-item" data-ng-repeat = "row in dataInfo.lstSelection track by $index" id ="sel{{$index}}" data-ng-if ="row.nameCn == null " data-ng-click = "selClick($index)">{{row.artistNameCn}} </li> -->
</ul>
</div>

</div>

JS：

js：//左右选择框

//选中的艺人
var selectId = "";
var selectName = "";
var selectIndex = "";
var selectTeamName = "";
var cancelId = "";
var cancelName = "";
var cancelTeamName = "";
var cancelIndex = "";



//选择区列表选择
$scope.selClick = function(index){
$('#sel li').not("#sel"+index).css('background-color','white');
$('#sel'+index).css('background-color','rgb(230, 242, 251)');

selectName = $scope.artistAll[index].artistNameC;
selectId = $scope.artistAll[index].stringArtId;
selectIndex = index;
};

//关联区列表选择
$scope.canClick = function(index){


$('#can li').not("#can"+index).css('background-color','white');
$('#can'+index).css('background-color','rgb(230, 242, 251)');
cancelId = $scope.artistleft[index].stringArtId;
cancelName = $scope.artistleft[index].artistNameC;
cancelIndex = index;
};

//从选择区选择艺人添加到关联区
$scope.select = function(){
if (!$scope.artistleft) {
$scope.artistleft = [];
}
if (!selectId) {
return;
}
var obj = {"stringArtId":selectId,"artistNameC":selectName};
$scope.artistleft.push(obj);
$scope.artistAll.splice(selectIndex,1);

selectId="";
selectName="";
selectTeamName = "";
$('#sel li').css('background-color','white');
};

//从关联区撤还艺人到选择区
$scope.cancel = function(){
if (!$scope.artistAll) {
$scope.artistAll = [];
}
if (!cancelId) {
return;
}
var obj = {"stringArtId":cancelId,"artistNameC":cancelName};
$scope.artistAll.push(obj);
$scope.artistleft.splice(cancelIndex,1);

cancelId = "";
cancelName = "";
cancelTeamName = "";
$('#can li').css('background-color','white');
};


save： $scope.save = function() {
// 防止二次提交

$scope.btnSaveEnable = false;
$scope.error = "";
//拼接相关艺人id
$scope.searchInfo.artistIds = "";
for(var i=0;i<$scope.artistleft.length;i++){
$scope.searchInfo.artistIds += $scope.artistleft[i].stringArtId +",";
};
alert(123);

// check
if (!inputCheck()) {
// 防止二次提交
$scope.btnSaveEnable = true;
return;
}
$scope.searchInfo.type=$("#type").val();
$scope.searchInfo.playbackId=$("#playbackId").val();
$scope.searchInfo.pubTime=$("#start").val();




$http({
method : "post",
url : "find/backplayRoomSave",
data :$scope.searchInfo
}).success(function(rs, status, headers, config) {
chkSession(rs);
if (rs.status == 0) {
$scope.success = "操作成功。";
var back = 1;
location.href = base + "/backplayroom-" + back;
} else {
$scope.error = rs.message;
$scope.btnSaveEnable = true;
}
}).error(function(rs, status, headers, config) {
$scope.error = "保存时，发生系统异常。";
$scope.btnSaveEnable = true;
});
};