Question

我有以下ng-repeat

<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
    <label class="control-label col-lg-4">{{selectedColumn.column}}</label>
    <div class="col-lg-8">
        <input ng-model="selectedColumn.column" type="text" value="" class="form-control" />
    </div>
</div>

SelectedListItems是：

$scope.SelectedListItems = [
        { column: 'Description' },
        { column: 'Colour' },
        { column: 'KW/PS' },
        { column: 'Chilometri x 1000 km' },
        { column: 'Reg.' },
        { column: 'Equipment' },
        { column: 'No. PJVA' },
        { column: 'Price' }
    ];

对于每个列，我想要一个新的文本框。另外，我想为每个文本框动态设置ng-model，以便我可以使用在其中键入的值。

现在我有两个问题：当我检查文本框时，文本框会填充列值，浏览器中的ng-model也是selectedColumn.column，所以我似乎无法理解如何从这些文本框中获取值。

Answer 1

您可以执行以下操作。

<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
    <label class="control-label col-lg-4">{{selectedColumn.column}}</label>
    <div class="col-lg-8">
        <input ng-model="selectedColumn.textInput" type="text" value="" class="form-control" />
    </div>
</div>

并且可以访问这样的值。

描述示例。

$scope.SelectedListItems[0].textInput;

Answer 2

您可以为数组中的每个项目添加新属性，并将值存储在那里。

$scope.SelectedListItems = [
        { columnName: 'Description', columnValue:'' },
        { columnName: 'Colour', columnValue:'' }      
    ];

HTML

<div ng-repeat="selectedColumn in SelectedListItems" class="form-group">
    <label class="control-label col-lg-4">{{selectedColumn.columnName}}</label>
    <div class="col-lg-8">
        <input ng-model="selectedColumn.columnValue" type="text" value="" class="form-control" />
    </div>
</div>

动态设置ng-model而不填充文本框

2 个答案: