Set a <select> HTML tag using $scope - AngularJS

Question

I have an HTML <select> tag:

Document type <select class="form-control" name="document_type" ng-model="document_type"
                            ng-options="opt as opt.label for opt in options" required>

I have saved an options variable in the scope of my model:

$scope.options = [{
                        label : '',
                        value : ''
                    },  {
                        label : "ID card",
                        value : "ID card"
                    }, {
                        label : 'Passport',
                        value : 'Passport'
                    }, {
                        label : 'Driving license',
                        value : 'Driving license'
                    } ];

In this way I have the following field:

My target is to set the document_type 'variable' using the $scope:

$scope.document_type = "Passport"

but it does not work and the <select> field stays blank.

Yes it is. There are just the three choices that you can see in my picture. — harry-potter
– harry-potter, Commented Jul 5, 2016 at 9:43

Claies · Accepted Answer · 2016-07-05 10:12:55Z

Your select is actually setting document_type to an object with label and value properties, but you are trying to assign the default value as a string.

If you want document_type to be a string rather than an object, you should change your ng-options clause slightly. instead of opt as opt.label ... use opt.value as opt.label ...

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.options = [{
    label: '',
    value: ''
  }, {
    label: "ID card",
    value: "ID card"
  }, {
    label: 'Passport',
    value: 'Passport'
  }, {
    label: 'Driving license',
    value: 'Driving license'
  }];
  
  $scope.document_type="Passport";
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  Document type
  <select class="form-control" name="document_type" ng-model="document_type" 
          ng-options="opt.value as opt.label for opt in options" required></select>
</body>

</html>

Pankaj Kumar · Accepted Answer · 2016-07-05 09:49:20Z

1

Check the following plunkr..

https://plnkr.co/edit/CLue567fPpxp5gXMobcP?p=preview

<select class="form-control" name="document_type" ng-model="document_type"
                            ng-options="opt as opt.label for opt in options" ng-change="func()"  required></select>

.

$scope.func=function(){
     alert($scope.document_type.value);
   }

answered Jul 5, 2016 at 9:49

Pankaj Kumar

8815 silver badges12 bronze badges

Comments

Pandiyan Cool · Accepted Answer · 2016-07-05 09:52:32Z

1

Try out the following

<select class="form-control" ng-model="document_type" 
   ng-options="opt as opt.label for opt in options">
</select>

<div>{{ document_type }}</div>

 $scope.options = [{
    label: '',
    value: ''
  }, {
    label: "ID card",
    value: "ID card"
  }, {
    label: 'Passport',
    value: 'Passport'
  }, {
    label: 'Driving license',
    value: 'Driving license'
  }];

  $scope.document_type = $scope.options[2];

In your question you are setting the text to your selected option, but in your actual implementation you adding an JSON formatted data as ng-option. If you set proper format data, it will get selected.

http://jsfiddle.net/svpjgm8s/

answered Jul 5, 2016 at 9:52

Pandiyan Cool

6,5838 gold badges53 silver badges90 bronze badges

Comments

FDavidov · Accepted Answer · 2016-07-05 09:43:34Z

0

Depending on the context where you make this assignment, you may need to include after it the following invocation:

 $scope.$apply() ;

Try this.

answered Jul 5, 2016 at 9:43

FDavidov

3,7556 gold badges27 silver badges72 bronze badges

Collectives™ on Stack Overflow

Set a <select> HTML tag using $scope - AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related