Question

我的问题很可能是一个简单的解决方案，但我是angularJS的新手。我正在做的是使用“添加新按钮”向DOM添加新表单。这样可以正常工作，但如果没有数据可以使用ng-repeat进行迭代，我需要显示一个默认表单。如何实现？

这是我的代码：

feeCollectCtrl.addMoreFees = function () {

            if (!feeCollectCtrl.feeCollectData.fees) {
                feeCollectCtrl.feeCollectData.fees = [];
            }
            feeCollectCtrl.feeCollectData.fees.push({
                "id": null,
                "paymentName": "",
                "fee": "",
                "deadlineDate": ""
            });
        };

和html是：

<ul class="list-unstyled">
                <li data-ng-repeat="fee in feeCollectCtrl.feeCollectData.fees" class="feecollection-item" ng-form="feeCollectForm">
                   <div data-ng-if="!fee.paymentName"> {{'Payment ' + ($index +1)}}</div>
                    <div data-ng-if="fee.paymentName"><b>The Fee for {{fee.paymentName}} is ${{fee.fee | number:2}}</b> To change, input a new charge below.</div>
                    <div class="panel panel-default">
                        <div class="panel-body fee-panel">
                            <div class="form-group form-horizotal" data-ng-class="{ 'has-error': feeCollectForm.paymentName.$invalid && feeCollectForm.paymentName.$touched}">
                                <label for="paymentName" class="col-sm-3 control-label">Payment Name</label>
                                <div class="col-sm-8">
                                    <input type="text" required="required" data-ng-model="fee.paymentName" maxlength="50" class="form-control" name="paymentName" id="paymentName" placeholder="Payment Name">
                                    <div data-ng-if="feeCollectForm.paymentName.$touched" data-ng-messages="feeCollectForm.paymentName.$error">
                                        <span class="help-block" data-ng-message="required">required field</span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-inline col-xs-12">
                                <div class="col-xs-2"></div>
                                <div class="col-xs-10">
                                    <div class="form-group fee-amount" data-ng-class="{ 'has-error': feeCollectForm.fee.$invalid && feeCollectForm.fee.$touched}">
                                        <label for="fee" class="control-label">Fee</label>
                                        <span class="currencySpanFees">$</span>
                                        <valid-number name="fee" required="required" id="fee" data-ng-model="fee.fee" placeholder="Fee Amount" cssclass="form-control currencyInput" />

                                        <div data-ng-if="feeCollectForm.fee.$touched" data-ng-messages="feeCollectForm.fee.$error">
                                            <span class="help-block" data-ng-message="required">required field</span>
                                        </div>
                                    </div>
                                    <div class="form-group fee-deadline" data-ng-class="{ 'has-error': feeCollectForm.deadlineDate.$invalid && feeCollectForm.deadlineDate.$touched}">
                                        <label for="deadlineDate" class="control-label">Deadline</label>
                                        <div class="input-group">
                                            <input name="deadlineDate" id="deadlineDate" type="text" class="form-control" show-button-bar="true" datepicker-popup="{{format}}" ng-model="fee.deadlineDate" is-open="fee.opened" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" required="required" close-text="Close" ng-change="feeCollectCtrl.validateDate('deadlineDate',feeCollectForm.deadlineDate.$viewValue)" ng-keyup="feeCollectCtrl.validateDate('deadlineDate',feeCollectForm.deadlineDate.$viewValue)" />
                                            <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open($event, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
                                          </span>
                                        </div>

                                        <div data-ng-if="feeCollectForm.deadlineDate.$touched" data-ng-messages="feeCollectForm.deadlineDate.$error">
                                            <span class="help-block" data-ng-message="required">required field</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="delete-fee pull-right" data-ng-click="feeCollectCtrl.removeFees($index)"><i class="fa fa-trash-o"></i> delete</span>
                        </div>
                    </div>
                </li>
            </ul>

Answer 1

你可以这样：

<li ng-show=feeCollectCtrl.feeCollectData.fees.length===0">
 <--! place your default form here -->
</li>
<li data-ng-repeat="fee in feeCollectCtrl.feeCollectData.fees" class="feecollection-item" ng-form="feeCollectForm"> ....

第一个li只会在数组为空时显示。在任何情况下，您都应该将表格放在ng-repeat之外。

Answer 2

我发现的最佳解决方案是在GET请求期间推送（）元素。所以在GET中我们检查是否有任何对象，如果不是，我们就像这样调用push函数：

GET请求：

var processFeeData = function (data) {
    originalResetData = angular.copy(data);
    feeCollectCtrl.feeCollectData = data;
      if (feeCollectCtrl.feeCollectData.fees && feeCollectCtrl.feeCollectData.fees.length) {
                for (var i = 0; i < feeCollectCtrl.feeCollectData.fees.length; i++) {
                    var temp = new Date(feeCollectCtrl.feeCollectData.fees[i].deadlineDate);
                    feeCollectCtrl.feeCollectData.fees[i].deadlineDate = formatDate(new Date(temp.getTime() + temp.getTimezoneOffset() * 60000));
                }
            } else {
          // Here I am calling the push() Function
                feeCollectCtrl.addMoreFees();
            }
            setFormPristine();
        };
feeCollectCtrl.get_fees_data = function (url) {
            serverFeesUpload.get(url).then(function (data) {
                processFeeData(data);
            });
        };

推送功能

feeCollectCtrl.addMoreFees = function () {
            if (!feeCollectCtrl.feeCollectData.fees) {
                feeCollectCtrl.feeCollectData.fees = [];
            }
            feeCollectCtrl.feeCollectData.fees.push({
                "id": null,
                "paymentName": "",
                "fee": "",
                "deadlineDate": ""
            });
        };

AngularJS将数据推送到对象数组中，但如果对象数组为空，则显示默认元素

2 个答案: