在ng-repeat中添加项目后,Angular 1.4.14 <input />不显示ng-model值

时间:2017-12-25 16:19:49

标签: angularjs

我在InvoiceLines的ng-repeat中有哪个ng-model +首先添加新的发票行后,我输入一些字符,ng-model和输入值显示,InvoiceLines有1行。
+在第二次添加新的发票行后,InvoiceLines有2行,第一行显示空白但是ng-model保留我输入的旧值
这是我的HTML

<div class="grid-row" ng-repeat="invoiceLine in EditInvoice.InvoiceLines track by $index" data-idx="{{$index + 1}}" ng-init="invoiceLine.LineNo = $index + 1 + ''">
    <div class="data-row row sortable-handle editable-row">
        <div class="row-index col" style="width:50px; float:left;">
            {{$index + 1}} 
        </div>
        <div class="col grid-static-col" style="width:150px; float:left;">
            <div class="form-group">
                <select class="form-control item-code" name="ItemCode[]" id="ItemCode_{{$index + 1}}" ng-model="invoiceLine.ItemCode">
                    <option value="">--Select --</option>
                </select>
            </div>
        </div>
        <div class="col grid-static-col" style="width:300px; float:left;">
            <div class="form-group">
                <input type="text" class="form-control" name="Description[]" id="Description_{{$index + 1}}" ng-model="invoiceLine.Description" />
            </div>
        </div>
    </div>
</div>  

这是我的addLine函数

$scope.addLine = function() {
            var _invoiceLine = $scope.createInvoiceLineObject();

            $scope.EditInvoice.InvoiceLines.push(_invoiceLine);

        };

如果我使用

<input type="text" class="form-control" name="Description[]" id="Description_{{$index + 1}}" ng-model="invoiceLine.Description" ng-value="invoiceLine.Description"/>
第一行的

将保留我在调用函数addLine后键入的旧值

更新
如果仅使用ng-model,则出现错误 Here is error if use ng-model only

如果使用具有ng值的ng-model,则可以 It will be ok if use ng-model with ng-value

2 个答案:

答案 0 :(得分:1)

你只需要ng-model,

<input type="text" class="form-control" name="Description[]" id="Description_{{$index + 1}}" ng-model="invoiceLine.Description">

答案 1 :(得分:0)

如果仅使用ng-model

,则会出错
<form>  
  <div> header document here <div>  
  <div ng-repeat ...>  
    detail document here  
  </div>  
</form>

如果我改为

<form>
  <div> header document here <div>  
</form>
<form>
  <div ng-repeat ...>  
    detail document here
  </div>  
</form>

如果仅使用ng-model就可以了。