CODEWITHSUNDEEP
javascriptangularjsdrop-down-menuangular-ngmodelng-options
Zik
Zik

Reputation: 1576

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

I have a "format" object which contains a list of "datamapping" objects. My datamapping object contains these fields (but we're only concerned with 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>

Let's say we have 2 mappings in the dropdown list: "Mapping 1" and "Mapping 2". When I select a value from the dropdown, instead of a string being stored in the concatenation array (mapping.concatenation[$index]), it stores an object instead as shown in the image below. And if you expand the object you will see that it apparently references itself infinitely.

Console

Upvotes: 0

Views: 2741

Answers (1)

Srinivas ML
Srinivas ML

Reputation: 730

Can you try once with below code, because you are displaying mappingName and selecting entire object , if you want to select only name try as below

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

Reference 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.

Upvotes: 7

Related Questions