AngularJS: Option in a Select based on saved informations

Issue

I'm working on an application where I have to handle vehicules (items) defined by their brand, model and phase. Here is a simple version on Plunker : http://plnkr.co/edit/gA9mzMde4i9hpDfeOdWe

I have created 3 select based on a list of brand. Each brand has a list of models, and each models has a list of phases.

<select ng-options="brand as brand.label for brand in list track by brand.id" ng-model="itemTemp.brand" ng-change="itemTemp.model=''; itemTemp.phase='';">
  <option value="">Choose a brand</option>
</select>

When I saved the informations in my database, I realized that I was saving the whole models array in my item.brand and the whole phases array in my item.model, which in reality is way bigger than the example on Plunker. In order to save lighter item in my database, I decided to save only the labels of my brand and model. I reduced the weight of my item by 10.

The problem of doing so is that later when I need to retrieve the informations of the item I saved in my selects, I can't. If I save the whole arrays in item.brand ans item.models, my selects can retrieve the informations and take the correct value.

My question is : Is there any way to have the same result by only saving the labels and not the whole arrays ?

Solution

You can retrieve saved data by comparing it with your source array. Unfortunately it requires looping over data and find the matching entry.

I have edited your Plunker: http://plnkr.co/edit/dC1hMD2ZL79z37kPHAzE?p=preview

$scope.restoreItem = () => {
    $scope.itemTemp.brand = findInArray($scope.list, $scope.itemSaved.brand, 'label');
    $scope.itemTemp.model = findInArray($scope.itemTemp.brand.models, $scope.itemSaved.model, 'label');
    $scope.itemTemp.phase = findInArray($scope.itemTemp.model.phases, $scope.itemSaved.phase);
};

Answered By - Icycool