代码之家 › 专栏 › 技术社区 › The Sharp Ninja

角度:下拉列表不会填充

angular angularjs

The Sharp Ninja · 技术社区 · 6 年前

我的Angular应用程序的主页中有以下代码拒绝填充:

<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.js的区别了。:)

我的代码正在处理这个html:

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

由于缺少更好的术语,我能够将数据移动到“代码隐藏”中。

2 回复 | 直到 6 年前

SiddAjmera 6 年前

看起来你用的是angularjs,错误地用角度标记了这个问题。或者至少从你在angularjs中的语法可以看出这一点。

记住这一点,这里有一个答案可以帮助你在Angularjs和Angularjs中实现这一点:

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

角度:

你可以使用 *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 供参考。

Marcus Höglund 6 年前

应该是 ng-options="x.value as x.display for x in options" 如果希望选定的ngmodel包含选定的x.value。如果希望选定的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>