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

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 + 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="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: 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;
    }

});
时间: 2024-10-15 22:15:52

AngularJS:实现动态添加输入控件功能(转)的相关文章

js动态添加file控件

<html></head><script language="javascript" type="text/ecmascript">//======================//功能:在表单中input file控件//参数:parentID---要插入input file控件的父元素ID// inputID----input file控件的ID//======================function createI

C# WinForm动态添加MSChart控件

添加mschart.dll动态链接库 添加引用 System.Windows.Forms.DataVisualization MSChart控件作为方便的用户数据展示控件,可以方便的使用控件提供的形状和展示形式展示数据,早Web应用中用的比较多,这几天一直在做一个基于Winform的CS结构的演示程序,用到了MSChart,由于一直也不太熟悉MSChart,又是动态自定义添加,所以一点一点的摸索着做起来,动态添加自定义的MSChart到WinForm程序中,上代码: 1.创建一条曲线形式的Cha

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

新建空白窗体,然后粘帖下面代码: 1 Option Explicit 2 Public WithEvents br As VBControlExtender 3 4 Private Sub br_ObjectEvent(Info As EventInfo) 5 If Info.Name = "NewWindow2" Then 6 'Dim fm As New Form1 7 'fm.Show 8 'Info.EventParameters(0) = br.object ‘根据需要可实现

easyui表单多重验证,动态设置easyui控件

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最开始的验证代码如下: 1 //学号格式只能为数字 ****//这里没有问题**** 2 number: {//value值为文本框中的值 3 validator: function (value) { 4 var reg = /^[0-9]*$/; 5 return reg.test(value);

asp.net动态增加服务器端控件并提交表单

为什么要用原生的呢? 1.目的 原生出现浏览器兼容性问题 极少,不用测试多浏览兼容性 .需要考虑到市面上的其他垃圾浏览器. 2.性能不好 如果不考虑第一条 你可以换一种方式 直接上代码 .aspx页面 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-

android 动态背景的实现以及SurfaceView中添加EditText控件

      首先还是一贯作风,我们先看案例: 静态图看不出来效果,如果用过此软件(扎客)的同学们都知道,她的背景会动.怎么样,是不是觉得很时尚,起码比静态的要好(个人观点).其实实现起来并 不复杂,这个如果让做游戏程序员做简直太小儿科了,这里我说明一点,其实我们做应用的也应该多少了解下游戏编程思维,起码对我们做应用有很好的帮助. 下面我简单介绍下实现方式. 实现原理:自定义一个SurfaceView控件.对之不停的onDraw,使得其背景动起来. 对于SurfaceView如果不了解的同学们麻烦

Android动态布局,并动态为TextView控件设置drawableLeft、drawableRight等属性添加图标

注:(图中每一个条目和图标都是由代码动态生成) 代码动态布局,并需要为每一个条目设置图标,此时用到了 android:drawableLeft="@drawable/icon"  父xml文件: [html] view plaincopyprint? <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.andr

未能加载视图状态。正在向其中加载视图状态的控件树必须与前一请求期间用于保存视图状态的控件树相匹配。例如,当以动态方式添加控件时,在回发期间添加的控件必须与在初始请求期间添加的控件的类型和位置相匹配

信息: 未能加载视图状态.正在向其中加载视图状态的控件树必须与前一请求期间用于保存视图状态的控件树相匹配.例如,当以动态方式添加控件时,在回发期间添加的控件必须与在初始请求期间添加的控件的类型和位置相匹配. 数据源: System.Web 堆栈信息: 在 System.Web.UI.Control.LoadViewStateRecursive(Object savedState) 在 System.Web.UI.Control.LoadChildViewStateByIndex(ArrayLis

JqueryMobile为Listview动态添加、删除查询功能

JqueryMobile的版本不同,引用JS的API也不同,因此为Listview动态添加.删除查询功能的代码也不同. 假设Listview控件内容如下: <ul data-role="listview" id="listview"  data-inset="true"> <li><a href="#">Acura</a></li> <li><a h