Trying to display value in my select option-CodePudding

When I try to display my value the select box is always empty. The vlaue is a integer 0 1 2 3 . In this case it should show 0 but the box is empty, what am i doing wrong vmDialog.dataModel.requestType value is equal to a 0 integer but not displaying

<select  name="requestType" ng-model="vmDialog.dataModel.requestType">
                  <option value=0>0</option>
                  <option value="{{0}}">0</option>
                  <option value="0">0</option>
                </select>

CodePudding user response：

Firstly there is a simple HTML issue, you need to ensure that each option has a unique value, so far you have used the value 0 for all the options, so when the requestType has a value of 0, the UI cannot pick which of the items should be selected.

If the value supposed to be one of 0,1,2,3 then you need to make sure that there is an option with a corresponding value that can be selected.

What you probably want to do is bind the options to an array that is in the view model:

// on vmDialog
var requestTypeOptions = [
  { name = 'Zero', value = 0 },
  { name = 'One', value = 1 },
  { name = 'Two', value = 2 },
  { name = 'Three', value = 3 },
];

Then in the view: (using ng-options)

<select 
        name="requestType" 
        ng-model="vmDialog.dataModel.requestType" 
        ng-options="o.value as o.name for o in vmDialog.requestTypeOptions track by o.value | orderby: 'value'" 
        >
</select>

A good write-up for ng-options here: https://stackoverflow.com/a/30507651/1690217

You could also use ng-repeat if you need to customise the template:

<select  name="requestType" ng-model="vmDialog.dataModel.requestType">
    <md-option ng-value="o.value" ng-repeat="oin vmDialog.requestTypeOptions | orderBy: 'value'">{{o.name}}</md-option>
</select>