CODEWITHSUNDEEP
javascriptangularjs
scooby
scooby

Reputation: 41

on select update value in another field with object respont data angular

I need some help. I have two values that come from a separate query and tables but are linked together. The one data has an integer value from Table A: 

{..}
WebDealerType: "1"

that I display in the field, next to it I offer a drop box with other value options that come from Table B: 

(4) […]
0: Object { DealerTypeID: "1", DealerTypeName: "Vehicle" }
1: Object { DealerTypeID: "2", DealerTypeName: "Recreational" }
2: Object { DealerTypeID: "3", DealerTypeName: "Auctions" }
3: Object { DealerTypeID: "4", DealerTypeName: "Mobility" }

This is set in the controller:

$scope.product = angular.copy(item); //Table A

Data.get('typeIDInfo').then(function (data) {
    $scope.product.typeID = data.data; //Table B
    console.log(data.data);
});

If the user selects a new value from the select box I want to update the newly selected integer value in the <input>. My problem is that it is updating it but putting the full object value in the input field instead of just the product.typeID.

This is the HTML:

<input value="{{product.WebDealerType}}" />
<select ng-model="product.WebDealerType" 
    ng-options="option.DealerTypeID+' -  '+option.DealerTypeName  for option in product.typeID track by option.DealerTypeID" 
    class="form-control" style="width: 200px;display: inline">
</select>

This is what it does right now. Image of dropbox:

Console log after selecting from the Input box:

WebDealerType: {…}
DealerTypeID: "4"
DealerTypeName: "Mobility Dealerships"

All I want to show and grab from the <input> field is the option.DealerTypeID value. I am just not sure how to achieve that.

Upvotes: 2

Views: 606

Answers (1)

Simon K
Simon K

Reputation: 2857

You need to review the ng-options syntax: AngularJS: API: ngOptions

select as label for value in array

Where:

  • select = what gets bound to ng-model on selection
  • label = what gets displayed to the user
  • value = variable for the current array value
  • array = the array you're iterating over

So your syntax should be the following:

<select ng-model="product.WebDealerType" ng-options="option.DealerTypeID as option.DealerTypeID+' -  '+option.DealerTypeName  for option in product.typeID track by option.DealerTypeID" class="form-control" style="width: 200px;display: inline"></select>

Upvotes: 1

Related Questions