首页 > 代码库 > angular的点击添加

angular的点击添加

2024-08-17 22:35:59   210人阅读

首先是在js里面我们可以用clone来点击添加一些东西比如列表或者其他的div之类的，但是在angular里面怎么实现点击添加呢？

类似这种：

技术分享这样就尴尬了，最少我这样的菜鸟是不知道怎么去写的，网上好像也没有！

后来一个老司机，哦不，大牛告诉我用ng-repeat可以实现

大概的代码是酱紫的：

h5：

<!--其他发明人-->
<div>
<!--添加发明人-->
<div class="ova mb30 ml15p">
<span class="color_standard curp" ng-click="replyObj.add_inventor()">
添加发明人&nbsp;&gt;
</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="http://www.mamicode.com/1">
<label for="otherInventor3_{{$index}}_type1">是</label>
</div>
<div class="dib">
<input ng-model="inventor.publish" id="otherInventor3_{{$index}}_type2" type="radio" ng-value="http://www.mamicode.com/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="http://www.mamicode.com/{{apply.img_src.invalid}}" alt="invalid">
</div>
<div ng-show="applicant_form[‘otherInventorName_‘ + $index].$valid">
<img ng-src="http://www.mamicode.com/{{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()">添加发明人&nbsp;&gt;</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()">添加发明人&nbsp;&gt;</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:[]
};

就这么简单！兴奋至于特此记录本次的脑残事件！

angular的点击添加


联系
我们