• 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;
        }
    
    });
  • 相关阅读:
    Centos 6.8安装配置KVM
    使用明小子进行网页渗透测试-XYCMS企业建站系统2.3(鑫跃教育)
    VSFTP2.3.4(笑脸漏洞)渗透测试
    MS08_067smb漏洞利用渗透测试
    css基本概念与css核心语法介绍
    HTML块级、行级元素,特殊字符,嵌套规则
    网页DIV+CSS布局与ifame传统布局对比
    html基本标签表单实现交互原理,单选框,复选框,下拉框介绍
    HTML基础标签图片文本超链接列表表格介绍
    html网页基本结构
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/4571558.html
Copyright © 2020-2023  润新知