Angular: Drop down won't populate

Question

I have the following code in the main page of my angular app that refuses to populate:

<div ng-app="MyApp" ng-controller="MyController">
  <select
    class="form-control"
    ng-model="selected"
    ng-options="x.value for x.display in options"
  >
  </select>
</div>
<script>
  var app = angular.module("MyApp", []);
  app.controller("MyController", function($scope) {
    $scope.options = [
      { value: "ADVISORY", display: "Advisory Conflict Check" },
      { value: "OTHER", display: "Other Conflict Check" }
    ];
    $scope.selected = $scope.options[0];
  });
</script>

Can you tell me where I'm going wrong? I'm new to Angular.

EDIT:

I now know the difference between angular and angular.js. :)

I got my code working with this HTML:

<select class="form-control" [(ngModel)]="conflictType" (ngModelChange)="updateConflictType($event)">
  <option *ngFor="let option of conflictTypes" 
    [value]="option.Value">{{option.Display}}</option>
</select>

I was able to move my data to my "code-behind" for lack of a better term.

score 2 · Accepted Answer · answered Nov 28 '18 at 15:46

Looks like you're using AngularJS and have wrongly tagged the question with angular. Or at least that's what's evident from your syntax which is in AngularJS.

Keeping that in mind here's an answer that will help you achieve this both in AngularJS as well as in Angular:

In AngularJS:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>

<body>
  <div ng-app="MyApp" ng-controller="MyController">
    <select class="form-control" ng-model="selected" ng-options="x.value as x.display for x in options">
    </select>
  </div>
  <script>
    var app = angular.module("MyApp", []);

    app.controller("MyController", function($scope) {
      $scope.options = [{
          value: "ADVISORY",
          display: "Advisory Conflict Check"
        },
        {
          value: "OTHER",
          display: "Other Conflict Check"
        }
      ];
      $scope.selected = $scope.options[0];
    });
  </script>
</body>

</html>

There's an issue with your ng-options syntax. ng-options="x.value for x.display in options" should have been ng-options="x.value for x in options" or ng-options="x.value as x.display for x in options"

In Angular:

You can use the *ngFor syntax to repeat through the options you want to provide as select options. Here's how you Component Class would look like in that case:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  selected = 'ADVISORY';

  options = [{
    value: "ADVISORY",
    display: "Advisory Conflict Check"
  },
  {
    value: "OTHER",
    display: "Other Conflict Check"
  }
  ];
}

And in your Template:

<select [(ngModel)]="selected">
  <option value="null" disabled>Select an option</option>
  <option 
    *ngFor="let option of options" 
    [value]="option.value">
    {{ option.display }}
  </option>
</select>

Here's a Working Sample StackBlitz for your ref.

The Angular example got me where I needed to be. – The Sharp Ninja Nov 28 '18 at 16:44 — The Sharp Ninja, Nov 28 '18 at 16:44

score 0 · Answer 2 · answered Nov 28 '18 at 15:21

0

It should be ng-options="x.value as x.display for x in options" if you want the NgModel selected to contain the selected x.value. If you want the NgModel selected to contain the complete selected object then use ng-options="x as x.display for x in options"

Here's a working example

  var app = angular.module("MyApp", []);
  app.controller("MyController", function($scope) {
    $scope.options = [
      { value: "ADVISORY", display: "Advisory Conflict Check" },
      { value: "OTHER", display: "Other Conflict Check" }
    ];
    $scope.selected = $scope.options[0].value;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
  <select
    class="form-control"
    ng-model="selected"
    ng-options="x.value as x.display for x in options">
  </select>
</div>

answered Nov 28 '18 at 15:21

Marcus Höglund

16,172
11
47
69

I see you've added angular.js 1.4.6. We are using Angular 6.1.0 -- at least according the to angular cli Angular CLI: 6.0.8 Node: 10.10.0 OS: win32 x64 Angular: 6.1.0 – The Sharp Ninja Nov 28 '18 at 15:27
@TheSharpNinja why did you tagged the question Angularjs then and also why do you use Angularjs NgOptions directive when you use Angular.. Note that Angularjs is completly different from Angular > 2 – Marcus Höglund Nov 28 '18 at 15:30
1

@TheSharpNinja heres a example https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value – Marcus Höglund Nov 28 '18 at 15:31

Angular: Drop down won't populate

2 Answers2

In AngularJS:

In Angular: