ng-options中的值存儲在ng-model中作爲對象而不是字符串

Question

我有一個包含「datamapping」對象列表的「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--> 
 
\t \t \t \t <hr width="50" align="left"> 
 
\t \t \t \t {{mapping.mappingName}} 
 
\t \t \t \t <div style="margin-left: 13px"> <!-- using a class for css is not working (even if it has !important), dont know why--> 
 
\t \t \t \t \t Column 
 
\t \t \t \t \t <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"/> 
 
\t \t \t \t \t Datatype 
 
\t \t \t \t \t <select class="form-control inline width-medium1" ng-class="{'unfilled': mapping.datatype == '' || mapping.datatype == null}" ng-model="mapping.datatype"> 
 
\t \t \t \t \t \t <option value="text">text</option> 
 
\t \t \t \t \t \t <option value="number">number</option> 
 
\t \t \t \t \t \t <option value="decimal">decimal</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t \t Data mapping 
 
\t \t \t \t \t <select class="form-control inline width-medium1" ng-class="{'unfilled': mapping.dataMapping == '' || mapping.dataMapping == null}" ng-model="mapping.dataMapping"> 
 
\t \t \t \t \t \t <option value="manuf">Manufacturer</option> 
 
\t \t \t \t \t \t <option value="product_name">Product Name</option> 
 
\t \t \t \t \t \t <option value="unit">Unit/Quantity</option> 
 
\t \t \t \t \t \t <option value="price">Price</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t \t <button class="btn btn-danger" ng-click="deleteMapping(format, $index)">Delete mapping</button> 
 
\t \t \t \t \t <input type="checkbox" ng-model="mapping.hasConcatenation" ng-click="includeConcatenation(mapping)"> Has Concatenation</label> 
 
        
 

 
             <!-- LOOK HERE --> 
 
\t \t \t \t \t <div ng-if="mapping.hasConcatenation"> 
 
\t \t \t \t \t \t Concatenation 
 
\t \t \t \t \t \t <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> 
 
\t \t       </div> 
 
\t </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元素的值將爲 或者是集合內值的索引（對於數組數據源）或屬性名稱（對於 對象數據源）。如果使用 表達式的軌跡，則表達式的結果將被設置爲 值的選項和選擇元素。