首先是在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({
,
       name:    ''
     });
  };

大概就是这样,然鹅,它会报错,vm.applicant.inventor.push是undefind(最开始的h5代码里面我没有添加other,至于为什么就不告诉你们了)!

当push报错的时候可以使用其他的方式来添加例如下面:
定义一个变量a,每次点击累加1,如此便可以实现在对象里面每次的点击就会产生一个新的属性
var tp=this;
     //添加申请人
     tp.applicant={};
     tp.applicant.inventor={};
;
          tp.add_inventor = function() {
;
              console.log(a)
              tp.applicant.inventor[a]={
,
                   name: ''
              };
          };
但是这样我觉得问题很多,虽然可以实现但是问题很多,自己测试就知道啦!
后来通过一次次的测试查资料发现push失效是因为我们的push是专门为数组做添加的,对对象是无效的!解决方法很简单,就是给添加一个数组在对象里面,然后push
数组就可以啦!

vm.applicant={};
vm.applicant.inventor={
other:[]
};

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

angular的点击添加的更多相关文章

  1. angular ng-repeat点击切换样式,浅谈track by $index

    前言 angular ng-repeat点击切换样式,ng-repeat点击切换class样式,巧用ng-repeat track by $index. 1.问题 一个ul包含多个li,li通过ng- ...

  2. 今天遇到的点击添加按钮button_click代码段无法执行的问题

    首先:本人小白一枚,刚入行,如有表述不当的地方,还请多多指教 网页界面如图: 当点击添加按钮后断点测试进入后台代码运行: 代码会先执行Page_Load页面,当加载完后Page_Load代码会跳转到m ...

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

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

    win7系统下或者64位系统下,安装完mysql-connector-odbc驱动后,直接进入:管理工具--数据源(ODBC),点击添加不显示该ODBC驱动 问题解决如下: C:\Users\Admi ...

  5. Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框

    点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 解决 Visual Studio 点击添加引用无反应的问题

    如遇到vs2010 点击添加引用无反应,主要是因为windows系统推送的更新问题,把windows系统推送的更新都更新一遍就好了. 如果已经安装VS后 Windows系统推荐的更新.360推荐的安全 ...

  7. OpenLayers学习笔记(三)— QML与HTML通信之 地图上点击添加自由文本

    实现在地图随意点击,弹出文本输入框,输入任意文字,完成自由文本添加的功能 作者: 狐狸家的鱼 GitHub:八至 本文链接:地图上点击添加自由文本 关于如何QML与HTML通信已经在上一篇文章 QML ...

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

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  9. js点击添加

    1.点击变色 <div id="dd" style="width:100px;height: 100px;background-color: #ccc"& ...

随机推荐

  1. UVa 3602 - DNA Consensus String 水题 难度: 0

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  2. 自定义xadmin后台首页

    登陆xadmin后台,首页默认是空白,可以自己添加小组件,xadmin一切都是那么美好,但是添加小组件遇到了个大坑,快整了2个礼拜,最终实现想要的界面.初始的页面如图: 本机后台显示这个页面正常,do ...

  3. OO第一次课程总结分析

    作为一个之前从未使用过java语言,主攻面向过程式编程的“面向对象”小白,于是乎从第一次作业开始时利用时间疯狂学习java语言,经过三次作业的残酷洗礼,自己对面向对象式编程多多少少有了初步的了解(前路 ...

  4. 8.1 C++输入输出类的层次

    参考:http://www.weixueyuan.net/view/6407.html 总结: 在C++中,输入输出数据的传送过程我们称之为流,一个流就是一个字节序列,对流可以进行读或写操作. 输入输 ...

  5. 输入三个double型的数据,放入到a,b,c三个变量中去,使用条件结构与交换逻辑将这三个变量中的值从小到大排列。

    import java.util.Scanner; public class C8{ public static void main(String []args){ /* 8.输入三个double型的 ...

  6. 强化学习9-Deep Q Learning

    之前讲到Sarsa和Q Learning都不太适合解决大规模问题,为什么呢? 因为传统的强化学习都有一张Q表,这张Q表记录了每个状态下,每个动作的q值,但是现实问题往往极其复杂,其状态非常多,甚至是连 ...

  7. centos下mysql数据迁移方法

    第一种: 原始数据库不需要重新安装: 默认mysql会安装在/var/lib/mysql这里,若将数据迁移到/data/mysql目录下,步骤如下: 1.停止mysql服务 2.#cp /var/li ...

  8. scrapy面试一

    1.动态加载又对及时性要求很高怎么处理? Selenium+Phantomjs 尽量不使用 sleep 而使用 WebDriverWait 2.分布式爬虫主要解决什么问题? (1)ip (2)带宽 ( ...

  9. python如何进行内存管理的

    python引用了一个内存池(memory pool)机制,即pymalloc机制(malloc:n,分配内存),用于管理对小块的申请和释放.

  10. IDEA PYCHARM USAGE NOTE

    初次安装使用PyCharm,在新建.py文件时会发现文件头并没有什么信息,因此,使用模板会比较方便. 方法如下: 1.打开PyCharm,选择File--Settings 2.依次选择Editor-- ...