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輸入框中來傳值給服務器。