ng-options 中的值作为对象而不是字符串存储在 ng-model 中

Question

我有一个“格式”对象，其中包含“数据映射”对象的列表。我的数据映射对象包含这些字段（但我们只关心concatenation）：

dataMapping.column = null;
dataMapping.datatype = null;
dataMapping.dataMapping = null;
dataMapping.mappingName = "Mapping " + (format.datamappings.length+1);
dataMapping.hasConcatenation = true;
dataMapping.concatenation = ["", ""];

<div style="margin: 1px 0px" ng-repeat="mapping in format.datamappings track by $index"> <!-- using a class for css is not working (even if it has !important), dont know why-->
				<hr width="50" align="left">
				{{mapping.mappingName}}
				<div style="margin-left: 13px"> <!-- using a class for css is not working (even if it has !important), dont know why-->
					Column
					<input class="form-control inline width-small" ng-class="{'unfilled': mapping.column == '' || mapping.column == null}" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || event.charCode == 8)" type="text" ng-model="mapping.column"/>
					Datatype
					<select class="form-control inline width-medium1" ng-class="{'unfilled': mapping.datatype == '' || mapping.datatype == null}" ng-model="mapping.datatype">
						<option value="text">text</option>
						<option value="number">number</option>
						<option value="decimal">decimal</option>
					</select>
					Data mapping
					<select class="form-control inline width-medium1" ng-class="{'unfilled': mapping.dataMapping == '' || mapping.dataMapping == null}" ng-model="mapping.dataMapping">
						<option value="manuf">Manufacturer</option>
						<option value="product_name">Product Name</option>
						<option value="unit">Unit / Quantity</option>
						<option value="price">Price</option>
					</select>
					<button class="btn btn-danger" ng-click="deleteMapping(format, $index)">Delete mapping</button>
					<input type="checkbox" ng-model="mapping.hasConcatenation" ng-click="includeConcatenation(mapping)"> Has Concatenation</label>
                    

                                        <!-- LOOK HERE -->
					<div ng-if="mapping.hasConcatenation">
						Concatenation
						<select ng-repeat="concat in mapping.concatenation track by $index" class="form-control inline width-medium1" ng-options="x.mappingName for x in format.datamappings" ng-model="mapping.concatenation[$index]"></select>
		                        </div>
	</div>
</div>

假设我们在下拉列表中有 2 个映射：“映射 1”和“映射 2”。当我从下拉列表中选择一个值时，它不是存储在 concatenation 数组 (mapping.concatenation[$index]) 中的字符串，而是存储一个对象，如下图所示。如果你展开这个对象，你会发现它显然无限地引用了自己。

Answer 1

您可以使用以下代码尝试一次吗，因为您正在显示 mappingName 并选择整个对象，如果您只想选择名称，请尝试如下

ng-options="x.mappingName as x.mappingName for x in format.datamappings"

参考https://docs.angularjs.org/api/ng/directive/ngOptions

使用 select as 会将选择表达式的结果绑定到 模型，但和 html 元素的值将 可以是索引（对于数组数据源）或属性名称（对于 对象数据源）集合中的值。如果一个轨道通过 使用表达式，该表达式的结果将被设置为 选项和选择元素的值。