CODEWITHSUNDEEP
javascriptangularjs
Kushal
Kushal

Reputation: 1360

Issue with select box value not getting pre selected in angularjs

Why is my select box option not getting selected on load?

As you can see from the script below there is already a class_id there in the "ng-model" of the select box still it doesn't gets that value selected in the option with the class_id present in the option.

Upon select box change the "ng-model" gets updated and the model also gets updated with the class_id of the option.

Need to set select box option to the pre selected class_id of the option.

Fiddle for the same is here 

angular
  .module("app", [])
  .controller("test", function($scope) {
    $scope.cartData = {
      order: [{
        class_id: 1,
        price: 121
      }, {
        class_id: 2,
        price: 11
      }],
      selectedSection: {
        classes: [{
          class_id: 1,
          name: "adsad"
        }, {
          class_id: 2,
          name: "2222"
        }]
      }
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">
  <ul class="bxslider" ng-controller="test">{{test}}
    <li class="mbm" ng-repeat="seat in cartData.order">
      <div class="box">
        <div class="select-style">
          Selected id: {{seat.class_id}}
          <select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes track by type.class_id" ng-model="seat.class_id">
            <!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
          </select>
        </div>
        <div class="price-sec">
          <span class="price">Price: {{seat.price}}</span>
        </div>
      </div>
    </li>
  </ul>

</div>

Upvotes: 0

Views: 128

Answers (1)

ngCoder
ngCoder

Reputation: 2105

Remove the track by type.class_id from ng-options.As the angular doc says

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.

$scope.items = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

This will work:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0];

but this will not work:

<select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
$scope.selected = $scope.items[0].subItem;

In both examples, the track by expression is applied successfully to each item in the items array. Because the selected option has been set programmatically in the controller, the track by expression is also applied to the ngModel value. In the first example, the ngModel value is items[0] and the track by expression evaluates to items[0].id with no issue. In the second example, the ngModel value is items[0].subItem and the track by expression evaluates to items[0].subItem.id (which is undefined). As a result, the model value is not matched against any and the appears as having no selected value.

angular
  .module("app", [])
  .controller("test", function($scope) {
    $scope.cartData = {
      order: [{
        class_id: 1,
        price: 121
      }, {
        class_id: 2,
        price: 11
      }],
      selectedSection: {
        classes: [{
          class_id: 1,
          name: "adsad"
        }, {
          class_id: 2,
          name: "2222"
        }]
      }
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app="app">
  <ul class="bxslider" ng-controller="test">{{test}}
    <li class="mbm" ng-repeat="seat in cartData.order">
      <div class="box">
        <div class="select-style">
          Selected id: {{seat.class_id}}
          <select ng-options="type.class_id as type.name for type in cartData.selectedSection.classes " ng-model="seat.class_id">
            <!-- <option ng-repeat="type in cartData.selectedSection.classes" value="{{type.class_id}}">{{type.name}}</option> -->
          </select>
        </div>
        <div class="price-sec">
          <span class="price">Price: {{seat.price}}</span>
        </div>
      </div>
    </li>
  </ul>

</div>

Upvotes: 1

Related Questions