augularjs问题，大师帮忙看看吧，谢谢！

laup_8897 2015-07-08 01:04:12

我项目中有一个需求

<li class="list-group-item" >
<div class="col-xs-3">电话</div>
<div class="col-xs-7 clear-pd">
<input type="number" name="tel" ng-model="tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">
</div>
<div class="col-xs-2"><a href="javascript:void(0)" class="pull-right" ><span class="icon iconfont text-red">新增</span></a></div>
</li>

想实现点击这个href就增加一行与上面一段完全一样的input（电话），并把原来的一行新增修改为“删除”，新添加的那一行保持“新增”不变。
这样的新增和删除如何实现呢？请大师们帮忙看看，不胜感激。?

...全文

184 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

tony4geek 2015-07-10

打赏
举报

参考这个

laup_8897 2015-07-09

打赏
举报

引用 3 楼 Giberson1 的回复:

[quote=引用 2 楼 Tony__1983 的回复:] 既然是用angularjs，要写dom操作为什么不写一个指令把上面的js代码写在指令里呢？

楼主只要解决问题就行。[/quote] 朋友，首先感谢您的回复，能不能帮忙给改成augularjs中的指令方式呢？js的我会写，就是想写成那种augularjs规范的方式，可能我表述不清楚，不大懂专业术语，期待您的回复，谢谢！

Giberson1 2015-07-08

打赏
举报

引用 2 楼 Tony__1983 的回复:

既然是用angularjs，要写dom操作为什么不写一个指令把上面的js代码写在指令里呢？

楼主只要解决问题就行。

Tony__1983 2015-07-08

打赏
举报

既然是用angularjs，要写dom操作为什么不写一个指令把上面的js代码写在指令里呢？

Giberson1 2015-07-08

打赏
举报

我刚给你写了一个例子，你可以直接运行：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

  <script type="text/javascript">

  <!--

	//要动态新增的html部分

	var operStr = '<br><input type="number" name="tel" ng-model="tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">';

	function add(){

		var div1 = document.getElementById("div1");

		//用于调试

		//alert(div1.innerHTML);

		div1.innerHTML = div1.innerHTML + operStr;

		//用于调试

		//alert(document.getElementsByName("tel"));

		//alert(document.getElementsByName("tel").length);

		if(document.getElementsByName("tel").length>1){

			document.getElementById("delete").style.display = "";

		}

	}

	function del(){

		var div1 = document.getElementById("div1");

		//用于调试

		//alert(div1.innerHTML);

		div1.innerHTML = div1.innerHTML.substring(0,div1.innerHTML.lastIndexOf(operStr));

		//用于调试

		//alert(document.getElementsByName("tel"));

		//alert(document.getElementsByName("tel").length);

		if(document.getElementsByName("tel").length>1){

			document.getElementById("delete").style.display = "";

		}

	}

  //-->

  </script>

 <li class="list-group-item" >

<div class="col-xs-3">电话</div>

<div class="col-xs-7 clear-pd" id="div1">

<input type="number" name="tel" ng-model="tel" class="form-control" id="exampleInputAmount" placeholder="请输入电话">

</div>

<div class="col-xs-2">

	<a href="javascript:void(0)" class="pull-right"  onclick="add()">

		<span class="icon iconfont text-red" id="add" >新增</span>

	</a>

	<a href="javascript:void(0)" class="pull-right"  onclick="del()">

		<span class="icon iconfont text-red" id="delete" style="display: none;">删除</span>

	</a>

</div>

</li> 

  



 </body>

</html>