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;

    }

});

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

  1. AngularJS：实现动态添加输入控件功能

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

  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. Linux 操作Mysql详解

    一.引言 想使用Linux已经很长时间了,由于没有硬性任务一直也没有系统学习,近日由于工作需要必须使用Linux下的MySQL.本以为有 Windows下使用SQL Server的经验,觉得在Linu ...

  2. 01-08-01【Nhibernate (版本3.3.1.4000) 出入江湖】NHibernate中的一级缓存

    缓存的范围? 1.事务范围 事务范围的缓存只能被当前事务访问,每个事务都有各自的缓存,缓存内的数据通常采用相互关联的对象形式.缓存的生命周期依赖于事务的生命周期,只有当事务结束时,缓存的生命周期才会结 ...

  3. Unity3D研究院之IOS本地消息通知LocalNotification的使用

    原地址:http://www.xuanyusong.com/archives/2632   现在的游戏里一般都会有本地消息,比如每天定时12点或者下午6点告诉玩家进入游戏领取体力.这种东西没必要服务器 ...

  4. DiskGenius的 “终止位置参数溢出”错误解决方法。

    (转帖)同事电脑系统启动突然明显变慢,重装系统后问题仍未解决(windowsxp sp3).帮忙分析感觉是磁盘分区表出现了错误,用通用PE工具箱进入PE系统,DiskGenius工具检查:“终止位置参 ...

  5. POJ 2823 Sliding Window （线段树/单调队列）

    题目不说了,可以用线段树或者单调队列,下面附上代码. 线段树: #include <iostream> #include <stdio.h> #include <algo ...

  6. Android 监听ListView、GridView滑动到底部

    // 监听listview滚到最底部 mIndexList.setOnScrollListener(new OnScrollListener() { @Override public void onS ...

  7. lintcode:子数组之和为0

    题目: 子数组之和 给定一个整数数组,找到和为零的子数组.你的代码应该返回满足要求的子数组的起始位置和结束位置 样例 给出[-3, 1, 2, -3, 4],返回[0, 2] 或者 [1, 3]. 解 ...

  8. SDK 与MFC

    SDK 就是Software Development Kit 软件开发包MFC 就是Microsoft Foundation Classes 微软函数类库.是以C++类的形式封装了Windows的AP ...

  9. springmvc常用注解之@Controller和@RequestMapping

    对于各种注解而言,排第一的当然是“@Controller”,表明某类是一个controller. “@RequestMapping”请求路径映射,如果标注在某个controller的类级别上,则表明访 ...

  10. 被称为同步神器的 BTSync，你可以怎么用？

    在这高速运作的信息化时代,使用云端来衔接工作和生活的点滴已是寻常事.可你是否曾扪心自问过:用各大云端备份自己的信息资料,真的安全放心吗? 毫不夸张的说,其实恶意代码和漏洞早已和你如影随形.你甚至都不用 ...