CODEWITHSUNDEEP
angularjs
TeeKai
TeeKai

Reputation: 691

One ng-options usage - selecting one property instead whole object

With a collection of objects, I need to have one property of the object shown in a selection list. My current HTML/AngularJS code is something like:

<select id="input-platform-id" class="form-control" ng-model="currentFactory.platform_id" data-ng-init="currentFactirt.platform_id" data-ng-options="p.id for p in platforms track by p.id">
</select>

The above loops over a collection of platform objects and it doesn't work for my need. I need to have the initial value is the same type as the property as well as the model.

I can think of a few approaches for this problem. I can change the back end code to have a collection of the property instead. That, however, requests many code changes due to our system has been built. On the AngularJS level, I could convert the platform objects to platform id objects. But, I don't know how to make a such conversion. Or, I could have the model as the same type of the platform and retrieve the id later. But, how to deal with the initial value which is not the same JSON object type as the platform?

The JSON is something like:

[
  {        
    "created_by": "joe",
    "created_date": "2015-08-22T05:22:48Z",
    "id": 2,
    "name": "Test Platform"
  }    
  {       
    "created_by": "jobs",
    "created_date": "2015-10-06T23:45:50Z",
    "id": 23,
    "name": "Test Platform 1"
  }
]

The AngularJS code:

  <select id="input-platform-id"
                                    class="form-control"
                                    data-ng-model="selectedPlatformID"
                                    data-ng-init="selectedPlatformID = platforms[0].id"
                                    data-ng-options="platform.id as platform.name for platform in platforms">
  </select>

And the generated HTML code starts with the following line

 <option value="?" selected="selected" label></option>

The rest value field starts from 0, 1, 2, ... in one increment sequence, which is not the data in the id field.

Thanks for your advice in advance.

Upvotes: 1

Views: 1704

Answers (1)

Icycool
Icycool

Reputation: 7179

There is a syntax to let you to have the best of both world.

<select id="input-platform-id" 
        class="form-control" 
        ng-model="currentFactory.platform_id" 
        data-ng-init="currentFactirt.platform_id = platforms[0].id" 
        data-ng-options="p.id as p.name for p in platforms track by p.id">
</select>

Note: If your $scope.platforms comes asynchronusly, consider init the ng-model in controller when you get the data.

Edit: include example

angular.module('test', [])

.controller('Test', function($scope, $timeout) {
  $scope.platforms = [{
    "created_by": "joe",
    "created_date": "2015-08-22T05:22:48Z",
    "id": 2,
    "name": "Test Platform"
  }, {
    "created_by": "jobs",
    "created_date": "2015-10-06T23:45:50Z",
    "id": 23,
    "name": "Test Platform 1"
  }]
  
  $timeout(function(){
    $scope.selectedPlatformID = 23;
  }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <select id="input-platform-id" 
          class="form-control" 
          data-ng-model="selectedPlatformID" 
          data-ng-options="platform.id as platform.name for platform in platforms">
  </select>
  <br>selectedPlatformID: {{selectedPlatformID}}
</div>

Upvotes: 1

Related Questions