我的问题很可能是一个简单的解决方案，但我是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>
答案 0 :(得分：0)
你可以这样：
<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之外。
答案 1 :(得分：0)
我发现的最佳解决方案是在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": ""
});
};