首先是在js里面我们可以用clone来点击添加一些东西比如列表或者其他的div之类的,但是在angular里面怎么实现点击添加呢?
类似这种:
这样就尴尬了,最少我这样的菜鸟是不知道怎么去写的,网上好像也没有!
后来一个老司机,哦不,大牛告诉我用ng-repeat可以实现
大概的代码是酱紫的:
h5:
<!--其他发明人-->
<div>
<!--添加发明人-->
<div class="ova mb30 ml15p">
<span class="color_standard curp" ng-click="replyObj.add_inventor()">
添加发明人 >
</span>
</div>
<div class="por" ng-repeat="inventor in replyObj.applicant.inventor.other">
<!--<div class="applicantDivider"></div>-->
<!--公布姓名-->
<div class="info_item">
<div class="infoItem_name"><span class="infoItem_needed">*</span>公布姓名:</div>
<div class="infoItem_content">
<div class="dib mr30">
<input ng-model="inventor.publish" id="otherInventor3_{{$index}}_type1" type="radio" ng-value="1">
<label for="otherInventor3_{{$index}}_type1">是</label>
</div>
<div class="dib">
<input ng-model="inventor.publish" id="otherInventor3_{{$index}}_type2" type="radio" ng-value="0">
<label for="otherInventor3_{{$index}}_type2">否</label>
</div>
</div>
</div>
<!--发明人姓名-->
<div class="info_item">
<div class="infoItem_name"><span class="infoItem_needed">*</span>发明人姓名:</div>
<div class="infoItem_content">
<input class="infoItem_contentMain" name="otherInventorName_{{$index}}" ng-model="inventor.name" type="text" placeholder="请填写设计人姓名" required>
<div class="infoItem_contentValid" ng-show="applicant_form.$submitted">
<div ng-show="applicant_form[‘otherInventorName_‘ + $index].$error.required">
<img ng-src="{{apply.img_src.invalid}}" alt="invalid">
</div>
<div ng-show="applicant_form[‘otherInventorName_‘ + $index].$valid">
<img ng-src="{{apply.img_src.valid}}" alt="valid">
</div>
</div>
</div>
</div>
<!--添加发明人-->
<div class="ova mb30 ml15p">
<span class="color_red mr10 curp" ng-click="delete_inventor(inventor)">删除</span>
<span ng-if="$last" class="color_standard curp" ng-click="apply.add_inventor()">添加发明人 ></span>
</div>
</div>
</div>
<!--添加发明人-->
<div class="ova mb30 ml15p">
<span class="color_red mr10 curp" ng-click="apply.delete_inventor(inventor)">删除</span>
<span ng-if="$last" class="color_standard curp" ng-click="apply.add_inventor()">添加发明人 ></span>
</div>
</div>
</div>
js:
vm.add_inventor = function () {
vm.applicant.inventor.push({
publish: 1,
name: ‘‘
});
};
大概就是这样,然鹅,它会报错,vm.applicant.inventor.push是undefind(最开始的h5代码里面我没有添加other,至于为什么就不告诉你们了)!
当push报错的时候可以使用其他的方式来添加例如下面:
定义一个变量a,每次点击累加1,如此便可以实现在对象里面每次的点击就会产生一个新的属性
var tp=this;
//添加申请人
tp.applicant={};
tp.applicant.inventor={};
var a=0;
tp.add_inventor = function() {
a+=1;
console.log(a)
tp.applicant.inventor[a]={
publish: 1,
name: ‘‘
};
};
但是这样我觉得问题很多,虽然可以实现但是问题很多,自己测试就知道啦!
后来通过一次次的测试查资料发现push失效是因为我们的push是专门为数组做添加的,对对象是无效的!解决方法很简单,就是给添加一个数组在对象里面,然后铺设数组就可以啦!
vm.applicant={};
vm.applicant.inventor={
other:[]
};
就这么简单!兴奋至于特此记录本次的脑残事件!