功能要求如下:
1.    点击加号可以增加输入框。
2.    点击减号可以减少输入框。
3.    当输入框只有一个的时候,不能再减少输入框。
效果图如下:
只有一个输入框

有多个输入框

要实现这个功能,可以用angularJS实现。实现步骤如下:
1.    在HTML中引入script

<script type='text/javascript' src='path/to/angular.min.js'></script>

2.    HTML部分代码如下:

 <div class="form-group" ng-controller="SendSafeMessageController">
<label class="col-md-2 control-label">答复内容:</label>
<div class="col-md-10">
<div ng-repeat="reply in fchat.replies">
<div class="form-group">
<div class="col-md-12">
<div class="col-md-1">
<label for="reply{{$index + 1}}">回答{{$index + 1}}</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" ng-model="reply.value"
id="reply{{$index + 1}}" name="reply{{$index + 1}}" />
</div>
<div class="col-md-2 img-link">
<a href="" ng-click="fchat.incrReply($index)">
<img src="/images/plus.png" alt="plus" width="30px" height="30px" />
</a>
<a href="" ng-click="fchat.decrReply($index)" ng-show="fchat.canDescReply">
<img src="/images/minus.png" alt="minus" width="30px" height="30px"/>
</a>
<img src="/images/dis_minus.png" alt="minus" width="30px" height="30px"
ng-show="!fchat.canDescReply"/>
</div>
</div>
</div>
</div>
<input type="hidden" id="replies" name="replies" value="{{fchat.combineReplies()}}" />
</div>
</div>

SendSafeMessageController.js代码如下:

 var ftitAppModule = angular.module('ftitApp', []);

 ftitAppModule.controller('SendSafeMessageController',
function ($scope, $log) {
$scope.fchat = new Object();
$scope.fchat.replies = [{key: 0, value: ""}];
// 初始化时由于只有1条回复,所以不允许删除
$scope.fchat.canDescReply = false; // 增加回复数
$scope.fchat.incrReply = function($index) {
$scope.fchat.replies.splice($index + 1, 0,
{key: new Date().getTime(), value: ""}); // 用时间戳作为每个item的key
// 增加新的回复后允许删除
$scope.fchat.canDescReply = true;
} // 减少回复数
$scope.fchat.decrReply = function($index) {
// 如果回复数大于1,删除被点击回复
if ($scope.fchat.replies.length > 1) {
$scope.fchat.replies.splice($index, 1);
}
// 如果回复数为1,不允许删除
if ($scope.fchat.replies.length == 1) {
$scope.fchat.canDescReply = false;
}
} $scope.fchat.combineReplies = function() {
var cr = "";
for (var i = 0; i < $scope.fchat.replies.length; i++) {
cr += "#" + $scope.fchat.replies[i].value;
}
cr = cr.substring(1);
$log.debug("Combined replies: " + cr); return cr;
}
}
);

需要注意的是,由于输入框是动态添加,所以事先我们是不知道到底有多少数据是可以传给服务器的,所以在js中用了一个combineReplies函数来将所有的输入框内容合并成一个数值,用#作为分隔符分开,然后放到一个hidden输入框中来传值给服务器。

AngularJS:实现动态添加输入控件功能的更多相关文章

  1. AngularJS:实现动态添加输入控件功能(转)

    http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> < ...

  2. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  3. ASP.NET动态添加用户控件的方法

    本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返 ...

  4. 动态添加easyui 控件

    jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...

  5. C# WinForm动态添加MSChart控件

    添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization     MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提 ...

  6. js动态添加file控件

    <html></head><script language="javascript" type="text/ecmascript" ...

  7. duilib 修复CTreeViewUI控件动态添加子控件时,对是否显示判断不足的bug

    转载请说明出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42264947 这个bug我在仿酷狗开发日志里提到过,不过后来发现修复的不够 ...

  8. AX 用代码创建FORM动态加控件,重载动态添加的控件的方法。

    eg. 范例:class\RFIDReadWriteForm/Build方法. formRun.controlMethodOverload(true); formRun.controlMethodOv ...

  9. VB动态添加WebBrowser控件,并拦截弹出窗口(不用引用任何组件)

    新建空白窗体,然后粘帖下面代码: Option ExplicitPublic WithEvents br As VBControlExtender Private Sub br_ObjectEvent ...

随机推荐

  1. JavaScript日期时间格式化函数

    这篇文章主要介绍了JavaScript日期时间格式化函数分享,需要的朋友可以参考下 这个函数经常用到,分享给大家. 函数代码: //格式化参数说明: //y:年,M:月,d:日,h:时,m分,s:秒, ...

  2. 微信小程序的那些坑

    早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. 1.UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. P ...

  3. Jmeter测试https协议

  4. Python_Virtualenv及Pycharm配置

    Virtualenv存在的意义 在Python使用过程中,你是否有遇到过同时需要开发多个应用的情况? 假设A应用需要使用DJango1.X版本,而B应用需要使用DJango2.X的版本,而你全局开发环 ...

  5. No entity found for query异常

    错误为getSingleResult();获取值时获取不到报异常. getSingleResult的源码有一句: @throws EntityNotFoundException if there is ...

  6. 硅谷和国内的 iOS 开发到底有何不同?

    前段时间在国内各大互联网公司转了一圈.与各位 iOS 业界大佬交流了之后,深感国内变化之大,敬佩诸位国内开发者的实力和韧劲.除此之外,我还发现硅谷和国内的 iOS 开发还是差别很大,且听我慢慢道来. ...

  7. 【bzoj4016】[FJOI2014]最短路径树问题 堆优化Dijkstra+DFS树+树的点分治

    题目描述 给一个包含n个点,m条边的无向连通图.从顶点1出发,往其余所有点分别走一次并返回. 往某一个点走时,选择总长度最短的路径走.若有多条长度最短的路径,则选择经过的顶点序列字典序最小的那条路径( ...

  8. 【Luogu】P2447外星千足虫(高斯消元)

    题目链接 高斯消元解%2意义下的方程,Bitset优化一下. 在消的过程中就能顺便把有解的第一问求出来,记录一下访问过的最大行. #include<cstdio> #include< ...

  9. NOJ——1508火烧赤壁2(并查集+启发式合并+逆序加边)

    [1508] 火烧赤壁2 时间限制: 1000 ms 内存限制: 65535 K 问题描述 上次出了一道火烧赤壁的题目给当时的新生,也就是你们的上一届学长们做,那么这次,我又想到了另一个想法. 上次的 ...

  10. bzoj1566【Noi2009】管道取珠

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1566 两个栈不断pop,共C(n+m,n)种,ai表示每个相同序列的方案数,求∑(ai^2) ...