Question

我的角度应用程序主页上有以下代码，拒绝填充：

<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>

您能告诉我我要去哪里了吗？我是Angular的新手。

编辑：

我现在知道angular和angular.js之间的区别。：）

我让我的代码使用此HTML：

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

由于没有更好的用词，我能够将数据移到“代码隐藏”中。

Answer 1

看起来您正在使用AngularJS，并用angular错误地标记了问题。至少从AngularJS的语法中可以明显看出这一点。

请记住，这是一个答案，可以帮助您在AngularJS和Angular中实现这一目标：

在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>

您的ng-options语法有问题。 ng-options="x.value for x.display in options"应该是ng-options="x.value for x in options"或ng-options="x.value as x.display for x in options"

在Angular中：

您可以使用*ngFor语法在要提供为select option的选项中进行重复。在这种情况下，组件类的外观如下：

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"
  }
  ];
}

在您的模板中：

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

这是您推荐的Working Sample StackBlitz。

Answer 2

如果您希望所选的NgModel包含所选的x.value，则应为ng-options="x.value as x.display for x in options"。如果希望所选的NgModel包含完整的所选对象，请使用ng-options="x as x.display for x in options"

这是一个可行的例子

  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>

角度：下拉列表不会填充

2 个答案:

在AngularJS中：

在Angular中：