AngularJS:实现动态添加输入控件功能(转)
2024-10-19 23:43:10
http://www.cnblogs.com/ilovewindy/p/3849428.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/angular/angular.min.js"></script>
<script src="SendSafeMessageController.js"></script>
</head>
<body ng-app="ftitApp">
<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 + }}</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="img/plus.png" alt="plus" width="30px" height="30px" />
</a>
<a href="" ng-click="fchat.decrReply($index)" ng-show="fchat.canDescReply">
<img src="img/minus.png" alt="minus" width="30px" height="30px"/>
</a> </div>
</div>
</div>
</div>
<input type="hidden" id="replies" name="replies" value="{{fchat.combineReplies()}}" />
</div>
</div>
</body>
</html>
SendSafeMessageController.js代码如下:
var ftitAppModule = angular.module('ftitApp', []); ftitAppModule.controller('SendSafeMessageController',function($scope,$log){ $scope.fchat = new Object();
$scope.fchat.replies = [{key: , value: ""}];
// 初始化时由于只有1条回复,所以不允许删除
$scope.fchat.canDescReply = false; // 增加回复数
$scope.fchat.incrReply = function($index) {
$scope.fchat.replies.splice($index + , ,
{key: new Date().getTime(), value: ""}); // 用时间戳作为每个item的key
// 增加新的回复后允许删除
$scope.fchat.canDescReply = true;
} // 减少回复数
$scope.fchat.decrReply = function($index) {
// 如果回复数大于1,删除被点击回复
if ($scope.fchat.replies.length > ) {
$scope.fchat.replies.splice($index, );
}
// 如果回复数为1,不允许删除
if ($scope.fchat.replies.length == ) {
$scope.fchat.canDescReply = false;
}
} $scope.fchat.combineReplies = function() {
var cr = "";
for (var i = ; i < $scope.fchat.replies.length; i++) {
cr += "#" + $scope.fchat.replies[i].value;
}
cr = cr.substring();
// $log.debug("Combined replies: " + cr); return cr;
} });
最新文章
- Python Day17
- 字符串混淆技术应用 设计一个字符串混淆程序 可混淆.NET程序集中的字符串
- 集合2--毕向东java基础教程视频学习笔记
- 标签中id和name的作用和区别
- Thinkphp 连接查询的使用
- Asp.net设计模式笔记之二:应用程序分离与关注点分离
- Logback常用配置详解
- java网页抓取
- POJ 1328 Radar Installation 贪心 难度:1
- vbscript multiple line syntax
- CentOS 6.3下rsync服务器的安装与配置[转]
- ASP.NET vNext (一)- 基本概念和环境配置
- libGDX-wiki发布
- QEMU, a Fast and Portable Dynamic Translator-Fabrice Bellard-翻译
- 【原创】大叔经验分享(4)Yarn ResourceManager页面如何实现主被自动切换
- python 使用 PIL 和 matplotlib 获取图片像素点处理之后再写入
- cent OS 7查询IP
- MYSQL存储过程实现用户登录
- [LeetCode&;Python] Problem 453. Minimum Moves to Equal Array Elements
- Android 抓取LOG的几种命令【转】