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

Question

我有一个 "format" 对象，其中包含 "datamapping" 个对象的列表。我的数据映射对象包含这些字段（但我们只关心 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 个映射："Mapping 1" 和 "Mapping 2"。当我 select 下拉列表中的值而不是字符串存储在 concatenation 数组 (mapping.concatenation[$index]) 中时，它会存储一个对象，如下图所示。如果展开该对象，您会发现它显然无限引用自身。

Answer 1

你能用下面的代码试一次吗，因为你正在显示 mappingName 和 selecting 整个对象，如果你想 select 只用下面的名字试试

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

引用https://docs.angularjs.org/api/ng/directive/ngOptions

Using select as will bind the result of the select expression to the model, but the value of the and html elements will be either the index (for array data sources) or property name (for object data sources) of the value within the collection. If a track by expression is used, the result of that expression will be set as the value of the option and select elements.

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

value in ng-options is stored in ng-model as object instead of string

javascript

angularjs

drop-down-menu

angular-ngmodel

ng-options