angular的点击添加

首先是在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="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()">添加发明人&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:[]
};

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

时间: 2024-11-08 02:42:14

angular的点击添加的相关文章

添加数据源,管理工具--数据源(ODBC),点击添加不显示该驱动

win7系统下或者64位系统下,安装完mysql-connector-odbc驱动后,直接进入:管理工具--数据源(ODBC),点击添加不显示该ODBC驱动 问题解决如下: C:\Users\Administrator>cd\windows\SysWOW64 C:\windows\SysWOW64>odbcad32 回车弹出 ODBC数据源管理器,在此窗口下进行添加操作即可看到:MySQL ODBC 5.1 Driver,点击完成,进行后续操作,完成添加操作,图示如下:

点击添加按钮添加一条记录,点击删除按钮删除本条记录

点击添加按钮添加一条记录,点击删除按钮删除本条记录,并且最多只能添加4条记录 <div class="addfee"> <div><span class="add-btn">添加</div> </div> jquery //添加删除费用,最多可添加4条 $(".add-btn").on("click", function() { var len = $(".

jquery点击添加样式,再点击取出样式

<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击添加边框,再点击去掉边框</title> <style> ul li{ float:left; list-style:none; width:50px; height:30px; border:1px solid #E3E3E3; line-height:30px; text-al

点击添加或减少数量,总价随之改变(keyup的用法)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击添加或减少数量,总价随之改变(keyup的用法)</title> <link rel="stylesheet" href="style.css"> <meta content="width=

微信小程序实现给循环列表点击添加类(单项和多项)

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 1 <view> 2 <view class='appointent-date'> 3 <view class="appointent-d

表格添加 点击添加增加一列

改代码来源于广西省平台的uums项目中的jsp/addOrUpdate.jsp界面(使用easyui 前后端未进行分离) //在表格中,点击添加的时候,自动增加一行<table style="width:98%" id="tab" class="table table-bordered table-condensed table-striped table-hover table-responsive"> <tbody>

解决Python3.6.5+Django2.0集成xadmin后台点击添加或者内容详情报 list index out of range 的错误

一 问题说明在创建Model的时候,如果存在类型是DateTimeField的字段,则在xadmin后端管理界面里,对该Model进行添加操作的时候,会报list index out of range. 这是上篇文章创建的Model: class IDC(models.Model): name = models.CharField(max_length=64) contact = models.CharField(max_length=32) phone = models.CharField(m

点击添加一行 删除一行 改变序列号

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>点击删除序号</title> </head> <body> <table> <tr> <td>1</td> <td>内容</td> <td><input type="butt

ASP.NET MVC 右键点击添加没有区域(Area)、控制器、试图等选项

在MVC项目中准备添加控制器.区域时发现没有控制器这个选项,当时没有在意以为VS出问题了,网上所搜了一下,有人说没有安装:Microsoft.AspNet.Mvc或者需要升级. 本次的解决如下: 1)在web项目的“引用”上操作,如下图的“引用”,右击,点击”管理NuGet程序包“. 2)在弹出界面,找到Microsoft.AspNet.Mvc,点击“卸载”,然后重新安装.或者选择升级,即可解决问题.