使用ng-value或ng-model选择时的选择选项

Question

Currently I am facing this issue

I have this array and this select html

$ctrl.languages =
        [
            {
                key: 'Play Prompt',
                value: 'blank'
            },
            {
                key: 'Dont Play Prompt - Assume English',
                value: 'English'
            },
            {
                key: 'Dont Play Prompt - Assume Spanish',
                value: 'Spanish'
            }
        ];

 <select class="form-control" name="vdn" ng-model="$ctrl.ivr.Language"
                                                        ng-options="item.value as item.key for item in $ctrl.languages" ng-required="true">

                                                </select>

I use that dropdown to show the key in the current dropdown for each option, and I save the "value" property of the option selected in a database but when I retrieve the data the option with the "value" ssaved is not selected.

In this case if I save 'blank' value in the database I want the dropdown to have the 'Play Prompt' key selected.

Thanks

Answer 1

You're setting up item.value as the value that gets set to $ctrl.ivr.Language whenever an option is selected from the dropdown. Since the <select> 's ngModel directive is pointing to $ctrl.ivr.Language , setting a value to $ctrl.ivr.Language within the controller will automatically add selected="selectd" to the item in the dropdown that has a value property that has a matching value.

Therefore, if you want "Play Prompt" to be the value that is selected in the dropdown when the database doesn't contain a value for that setting, then you can check whether the value exists in the API response, and if it doesn't, then set $ctrl.ivr.Language = 'blank' to default to the "Play Prompt" option.

Answer 2

This looks pretty straightforward. I've provided a working plunker here: https://plnkr.co/edit/sCusyXaSJdO0sjgm3csE?p=preview

Let me know if you were looking for something else.

In my code, I've added a timeout to simulate a web service call. Here is the controller code from the plunker:

app.controller('mainController', function($scope, $timeout) {
  $scope.languages = [
      {
          key: 'Play Prompt',
          value: 'blank'
      },
      {
          key: 'Dont Play Prompt - Assume English',
          value: 'English'
      },
      {
          key: 'Dont Play Prompt - Assume Spanish',
          value: 'Spanish'
      }
    ];

    $scope.ivr = {};

    // Simulating Web service Call
    $scope.retrievingData = true;
    $timeout(function() {
      $scope.ivr.Language = 'blank';
      $scope.retrievingData = false;
    }, 2000);
});