AngularJS实现动态添加输入控件功能
功能要求如下:
1. 点击加号可以增加输入框。
2. 点击减号可以减少输入框。
3. 当输入框只有一个的时候,不能再减少输入框。
效果图如下:
只有一个输入框
有多个输入框
要实现这个功能,可以用angularJS实现。实现步骤如下:
1. 在HTML中引入script
<script type='text/javascript' src='path/to/angular.min.js'></script>
2. HTML部分代码如下:
![](/assets/blank.gif)
1 <div class="form-group" ng-controller="SendSafeMessageController"> 2 <label class="col-md-2 control-label">答复内容:</label> 3 <div class="col-md-10"> 4 <div ng-repeat="reply in fchat.replies"> 5 <div class="form-group"> 6 <div class="col-md-12"> 7 <div class="col-md-1"> 8 <label for="reply{{$index + 1}}">回答{{$index + 1}}</label> 9 </div> 10 <div class="col-md-9"> 11 <input type="text" class="form-control" ng-model="reply.value" 12 id="reply{{$index + 1}}" name="reply{{$index + 1}}" /> 13 </div> 14 <div class="col-md-2 img-link"> 15 <a href="" ng-click="fchat.incrReply($index)"> 16 <img src="/images/plus.png" alt="plus" width="30px" height="30px" /> 17 </a> 18 <a href="" ng-click="fchat.decrReply($index)" ng-show="fchat.canDescReply"> 19 <img src="/images/minus.png" alt="minus" width="30px" height="30px"/> 20 </a> 21 <img src="/images/dis_minus.png" alt="minus" width="30px" height="30px" 22 ng-show="!fchat.canDescReply"/> 23 </div> 24 </div> 25 </div> 26 </div> 27 <input type="hidden" id="replies" name="replies" value="{{fchat.combineReplies()}}" /> 28 </div> 29 </div>
![](/assets/blank.gif)
SendSafeMessageController.js代码如下:
![](/assets/blank.gif)
1 var ftitAppModule = angular.module('ftitApp', []); 2 3 ftitAppModule.controller('SendSafeMessageController', 4 function ($scope, $log) { 5 $scope.fchat = new Object(); 6 $scope.fchat.replies = [{key: 0, value: ""}]; 7 // 初始化时由于只有1条回复,所以不允许删除 8 $scope.fchat.canDescReply = false; 9 10 // 增加回复数 11 $scope.fchat.incrReply = function($index) { 12 $scope.fchat.replies.splice($index + 1, 0, 13 {key: new Date().getTime(), value: ""}); // 用时间戳作为每个item的key 14 // 增加新的回复后允许删除 15 $scope.fchat.canDescReply = true; 16 } 17 18 // 减少回复数 19 $scope.fchat.decrReply = function($index) { 20 // 如果回复数大于1,删除被点击回复 21 if ($scope.fchat.replies.length > 1) { 22 $scope.fchat.replies.splice($index, 1); 23 } 24 // 如果回复数为1,不允许删除 25 if ($scope.fchat.replies.length == 1) { 26 $scope.fchat.canDescReply = false; 27 } 28 } 29 30 $scope.fchat.combineReplies = function() { 31 var cr = ""; 32 for (var i = 0; i < $scope.fchat.replies.length; i++) { 33 cr += "#" + $scope.fchat.replies[i].value; 34 } 35 cr = cr.substring(1); 36 $log.debug("Combined replies: " + cr); 37 38 return cr; 39 } 40 } 41 );
![](/assets/blank.gif)
需要注意的是,由于输入框是动态添加,所以事先我们是不知道到底有多少数据是可以传给服务器的,所以在js中用了一个combineReplies函数来将所有的输入框内容合并成一个数值,用#作为分隔符分开,然后放到一个hidden输入框中来传值给服务器。
AngularJS实现动态添加输入控件功能相关推荐
- mvc动态添加html控件,jquery – MVC3 Html.DisplayFor – 可以让这个控件生成一个ID吗?...
我想要显示一些文本,但也可以通过jQuery修改文本. model.DeviceComponentName)%> 如果我使用EditorFor而不是DisplayFor,我会看到输入控件的ID. ...
- android 动态添加删除控件,求教Android,动态添加到控件能动态删除吗?
protected View createView() {//动态添加组件 Button btn = new Button(this);//动态创建按钮 btn.setId(index++); btn ...
- 移除动态view android,请教Android,动态添加到控件能动态删除吗?
可以的.有2中方式: 1.动态添加的时候为组件设置id,删除的时候根据id查找到对应组件,然后删除 2.根据父节点,获取所有父组件下的子组件,然后依次删除. 示例: protected View cr ...
- VB动态添加WebBrowser控件,并拦截弹出窗口(不用引用任何组件)
WBCustomizer.dll 这个 1.注册::在开始菜单中输入RegSvr32 路径(WBCustomizer.dll文件所在的绝对路径),若果注册成功,会提示 2.引用 :在工程--&g ...
- js动态创建html控件,通过JS动态添加html控件后,添加样式以及OnClick
/** * 新增标签 * @param count */ function addLabel(count){ var image_id_obj = document.getElementById(&q ...
- 论在Xamarin里对AbsoluteLayout动态添加按钮控件实例(1)
RT 这个问题困扰了我一个多小时.添加很简单,但怎么在绝对布局里添加到不同的位置讷? 最后还是翻文档的时候翻到了,可以在Layout.Children.Add时,设置第二参如new Point(x,y ...
- asp.net panel 加html,ASP.NET 页面中动态增加的控件、添加事件
要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在R ...
- android 动态让控件超出屏幕_android 动态设置屏幕控件宽高度
获取屏幕宽高度: WindowManager wm = (WindowManager) context .getSystemService(Context.WINDOW_SERVICE); Displ ...
- js动态添加控件服务器响应,JS实现动态给标签控件添加事件的方法示例
本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans ...
最新文章
- Java多线程引发的性能问题,怎么解决?
- 【前端就业课 第一阶段】HTML5 零基础到实战(十一)canvas 基础
- Docker化Spring Boot应用程序
- 手工机器人的做法大全用易拉罐_纯手工自制黄油,做法简单详细易操作,蛋糕、饼干、面包都能用...
- 图书管理销售系统需求分析报告,对性能的规定以及运行环境规定部分
- 配置Apache Httpd Server 2.2 Virtual Host UrlRewrite
- 二叉树反转java实现
- 页面之间传递参数的几种方法荟萃(经典)
- 数学建模之相关分析分类与总结
- 优科无线并购Wi-Fi入网软件提供商Cloudpath Networks
- C语言打印菱形超详细版本,逐句解析
- secureCRT无限循环脚本
- 经典逻辑题:猜牌问题——网上的结论是没问题的
- 多版本谷歌chrome浏览器并存(谷歌浏览器从C盘移植)
- Unity 安卓 Unable to initialize the Unity Engine / No Enough Space to install unity
- 江西计算机好的本科学校,江西本科学校计算机及应用顶岗实习
- 买天文望远镜必看——已知望远镜焦距、相机画幅,求视场(附代码,实时更新)
- 从一个class文件深入理解Java字节码结构
- 2D转换和3D转换 transform
- 携智慧绿色综合能源解决方案,远景阿波罗闪耀2018无锡新能源大会
热门文章
- XMLJSON简答入门
- 宜信“硅谷对话北京2017”首秀美国 中美金融科技围湾论道
- java用正则表达式表示非法字符_非法字符的正则表达式
- 模板匹配算法_计算机视觉方向简介 | 多目标跟踪算法(附源码)
- 基于MS的Forcite模块模拟氢在钨表面的物理吸附
- Tduck问卷系统的部署文档
- 用python控制硬件_用Python控制硬件35-自制二三十元成本的信号测量采集控制系统...
- Python——windows下pip换源 和 自动生成和安装requirements.txt
- Android语音播报、后台播报、语音识别,android程序开发
- 学生在线预习行为数据分析-1