0
点赞
收藏
分享

微信扫一扫

Angular4前端实现动态添加属性,选中和取消选中

Angular4前端实现动态添加属性,选中和取消选中_数据源

ng多选.gif

添加属性


/*
* 本地添加属性操作
* 该函数通用,需要一个分类标识,需要往对应的数组里面添加数据
* */
addProperty():void{

let str = this.strKind;//对应的分类字段
let arrOne = {
state: this.nowClerk.name,
is_choice: 0,//默认不选中
};
console.log('数据源', arrOne);
switch(str) {
case 'skin':
this.skinObj.kind_info.push(arrOne); //皮肤
break;
case 'toenail':
this.toenailObj.kind_info.push(arrOne); //趾甲
break;
case 'tooth':
this.toothObj.kind_info.push(arrOne); //牙齿
break;
case 'anus':
this.anusObj.kind_info.push(arrOne); //肛门
break;
case 'coat':
this.coatObj.kind_info.push(arrOne); //毛发
break;
case 'ears':
this.earsObj.kind_info.push(arrOne); //耳朵
break;
case 'eyes':
this.eyesObj.kind_info.push(arrOne); //眼睛
break;
default:
}
layer.closeAll();
console.log();
}

删除属性

 /*
* 本地添加属性操作
* 该函数通用,需要一个分类标识,需要往对应的数组里面添加数据
* */
delProperty(kind:string,index:number):void{
let str = kind;//对应的分类字段
let curIndex = index;

console.log('数据源', curIndex);
switch(str) {
case 'skin':
this.skinObj.kind_info.splice(curIndex,1);
break;
case 'toenail':
this.toenailObj.kind_info.splice(curIndex,1);
break;
case 'tooth':
this.toothObj.kind_info.splice(curIndex,1);
break;
case 'anus':
this.anusObj.kind_info.splice(curIndex,1);
break;
case 'coat':
this.coatObj.kind_info.splice(curIndex,1);
break;
case 'ears':
this.earsObj.kind_info.splice(curIndex,1);
break;
case 'eyes':
this.eyesObj.kind_info.splice(curIndex,1);
break;
case 'language':
this.languageList.splice(curIndex,1); //常用语言
break;
default:
}
console.log('数据源this.coatObj', this.coatObj);
}

选中/取消选中

/*
* 构建一个选中当前属性的函数
* 是对那个属性进行操作(kind),传入的值是当前元素的下标,看是否是选中,如果是选中则取反
* */
addChecked(kind:string,index:number):void{
let str = kind;//对应的分类字段
let curIndex = index;
debugger
switch(str) {
case 'skin':
//this.skinObj.kind_info.splice(curIndex);
/*let arr = this.skinObj.kind_info;
for(let item of arr){
if(item === index){ //该函数是错误的,取不到下标
item.is_choice = item.is_choice===1 ? 0: 1;
}
return arr;
}*/
this.skinObj.kind_info = this.getNewArr(this.skinObj.kind_info,curIndex);
break;
case 'toenail':
this.toenailObj.kind_info = this.getNewArr(this.toenailObj.kind_info,curIndex);
break;
case 'tooth':
this.toothObj.kind_info = this.getNewArr(this.toothObj.kind_info,curIndex);
break;
case 'anus':
this.anusObj.kind_info = this.getNewArr(this.anusObj.kind_info,curIndex);
break;
case 'coat':
//this.coatObj.kind_info.splice(curIndex);
this.coatObj.kind_info = this.getNewArr(this.coatObj.kind_info,curIndex);
break;
case 'ears':
this.earsObj.kind_info = this.getNewArr(this.earsObj.kind_info,curIndex);
break;
case 'eyes':
this.eyesObj.kind_info = this.getNewArr(this.eyesObj.kind_info,curIndex);
break;
default:
}
layer.closeAll();
console.log('数据源this.skinObj', this.skinObj);

}

/*
* 遍历属性,并返回新的数组
* */
getNewArr(arr:any,index:number){
for(let i=0;i<arr.length; i++){
let item = arr[i];
if(i === index){
item.is_choice = item.is_choice===1 ? 0: 1;
debugger
}
}
return arr;
}

举报

相关推荐

0 条评论