Select element does not display received value in AngularJS

Question

For some reason I fail to understand, my select element (with ng-repeat) does not display the value that was retrieved from the DB.

The source markup is:

<select class="form-control" 
        id="Test_Method_Select_{{$index}}" 
        ng-model="One_Source.Test_Method_Code" 
        style="width:150px">
    <option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="{{One_Method.Value}}">
            {{One_Method.Value}} - {{One_Method.Name}}
    </option>
</select>

and the generated (by AngularJS) markup is:

<select class="form-control ng-pristine ng-valid ng-not-empty ng-touched" 
        id="Test_Method_Select_1" 
        ng-model="One_Source.Test_Method_Code" 
        style="width:150px">
    <option value="? number:26 ?"></option>
    <!-- ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
    <option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="103" class="ng-binding ng-scope">103 - LC-MS-MS</option>
    <!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
    <option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="26" class="ng-binding ng-scope">26 - Pesticides - GCMS</option>
    <!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
    <option ng-repeat="One_Method in One_Source.Formatted_Test_Methods_List" value="29" class="ng-binding ng-scope">29 - Aldicarb - LLE,GCMS</option>
    <!-- end ngRepeat: One_Method in One_Source.Formatted_Test_Methods_List -->
</select>

The element does not display 26 - Pesticides - GCMS even though is the value shown to be the received one.

Edit

Using Markus' suggestion, the source markup now looks as follows:

<select class="form-control" 
        id="Test_Method_Select_{{$index}}" 
        ng-model="One_Source.Test_Method_Code" 
        style="width:150px"
        ng-options="item.Value as (item.Value + '-' + item.Name) for item in One_Source.Formatted_Test_Methods_List">
</select>

Still, the selected value is not shown (note: I added Value from model: {{One_Source.Test_Method_Code}} just before the element and the correct value is shown, but not in the select element).

Marcus Höglund · Accepted Answer · 2018-08-27 11:58:39Z

1

You should take a look at NgOptions instead. Here's a working example where I set the selected options in the controller by setting $scope.One_Source.Test_Method_Code

angular.module("app",[]).controller("myCtrl",function($scope){
  $scope.One_Source = {};
  $scope.One_Source.Formatted_Test_Methods_List = [
  {
    value: 103,
    name: 'LC-MS-MS'
  },
  {
    value: 26,
    name: 'Pesticides - GCMS'
  },
  {
    value: 29,
    name: 'Aldicarb - LLE,GCMS'
  }
  ];
  $scope.One_Source.Test_Method_Code = 29;
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<select class="form-control" 
        id="Test_Method_Select_{{$index}}" 
        ng-model="One_Source.Test_Method_Code" 
        style="width:150px"
        ng-options="item.value as (item.value + '-' + item.name) for item in One_Source.Formatted_Test_Methods_List">
</select> 
</div>

answered Aug 27, 2018 at 11:58

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

FDavidov Over a year ago

Markus, thanks for the quick response. I need the model to contain the value 29 only (i.e. without the -Aldicarb - LLE,GCMS. Is that going to be the result? If not, how should I set the ng-options to achieve that?

FDavidov Over a year ago

Markus, I tested your suggestion and still, the value (29 in your example) is not being shown. I'll update the question with the new code for the source markup (2 mins...).

Marcus Höglund Over a year ago

@FDavidov check that the value in One_Source.Test_Method_Code is a number

FDavidov Over a year ago

Marcus, in one word, "BINGO". The issue was that the value field was a string. As soon as I wrapped it into a Number() function it all works as needed. Thank you Sir!!!!

Marcus Höglund Over a year ago

@FDavidov NP, "BINGO" hehe epic

Collectives™ on Stack Overflow

Select element does not display received value in AngularJS

Edit

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related