AngularJS:实现动态添加输入控件功能
功能要求如下:
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:实现动态添加输入控件功能的更多相关文章
- AngularJS:实现动态添加输入控件功能(转)
http://www.cnblogs.com/ilovewindy/p/3849428.html <!DOCTYPE html> <html> <head> < ...
- 谨记给UpdatePanel中动态添加的控件赋ID
原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...
- ASP.NET动态添加用户控件的方法
本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返 ...
- 动态添加easyui 控件
jquery提供了append,appendTo方法,可以动态添加静态的html文本,在easyui中,要动态添加easyui控件要怎么做呢,下面就来介绍动态添加easyui控件. 使用方法:和添加静 ...
- C# WinForm动态添加MSChart控件
添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提 ...
- js动态添加file控件
<html></head><script language="javascript" type="text/ecmascript" ...
- duilib 修复CTreeViewUI控件动态添加子控件时,对是否显示判断不足的bug
转载请说明出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42264947 这个bug我在仿酷狗开发日志里提到过,不过后来发现修复的不够 ...
- AX 用代码创建FORM动态加控件,重载动态添加的控件的方法。
eg. 范例:class\RFIDReadWriteForm/Build方法. formRun.controlMethodOverload(true); formRun.controlMethodOv ...
- VB动态添加WebBrowser控件,并拦截弹出窗口(不用引用任何组件)
新建空白窗体,然后粘帖下面代码: Option ExplicitPublic WithEvents br As VBControlExtender Private Sub br_ObjectEvent ...
随机推荐
- [转载]ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作
出处:[Lipan] (http://www.cnblogs.com/lipan/) 现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可 ...
- NetBeans无法使用编码GBK安全地打开该文件
今天用NetBeans打开包含路径里面的UTF-8编码的文件时,提示:NetBeans无法使用编码GBK安全地打开该文件. 后来在网上搜索找到了解决方案,原文地址:http://qdjinxin.it ...
- day05_03 字符串格式化
pycharm小技巧,一般情况下都需要在代码前注释以下作者以及创建日期 但是如何让软件默认生成呢? 格式化输出 可以用占位符 %s string的缩写 #__author:Administra ...
- Spring中的注解 @Qualifier
在使用Spring框架中@Autowired标签时默认情况下使用 @Autowired 注释进行自动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个.当找不到一个匹配的 Bean ...
- HUST——1110雪碧(简单DFS)
1110: 雪碧 时间限制: 1 Sec 内存限制: 128 MB 提交: 18 解决: 6 题目描述 杨神最近特别喜雪碧,他现在有两瓶,他大晚上的在街上走,他逢店加一倍(雪碧),逢摊吃大虾并喝一 ...
- ACM程序设计选修课——1049: Efface Numbers(贪心)
1049: Efface Numbers Time Limit: 5 Sec Memory Limit: 128 MB Submit: 9 Solved: 4 [Submit][Status][W ...
- 群论 - Group Theory
群的定义 若非空集合\(G\)和定义在\(G\)上的二元运算\(⋅\)构成的代数结构\((G,⋅)\),满足: 封闭性:\(\forall a,b\in G\),有\(a⋅b\in G\). 结合律: ...
- 兼容ie8 rgba()写法
background: rgba(255,255,255,.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1 ...
- 单例/单体模式(Singleton)
单例/单体模式(Singleton) 首先,单例模式是对象的创建模式之一,此外还包括工厂模式. 单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3, ...
- Installing Metasploit Framework on Ubuntu 14.04 LTS and Debian 7
原文链接:http://www.darkoperator.com/installing-metasploit-in-ubunt/ This Guide covers the installation ...