Question

在AngularJS文档中，他们引用this fiddle，我从中推导出一个简单的jsfiddle here。

整个HTML：

<body ng-app="demoApp">
<div ng-controller="demoController">
<table>
  <tr>
    <td>Select Category
      <select ng-model="selectedCategory"
              ng-options="cat as cat for cat in categories">
      </select>
    </td>
    The category selected is: {{selectedCategory}}
  </tr>
  <tr>
    <td>Select CategoryId
      <select ng-model="selectedCatId"
              ng-options="ds as ds.id for ds in dataset">
      </select>
      The category id selected is: {{selectedCatId}}
    </td>
  </tr>
</table>
</div>
</body>

AngularJS控制器：

angular.module('demoApp', []).controller('demoController', function($scope) {
  $scope.categories = ["CAT1", "CAT2", "CAT3"];
  $scope.dataset = [
                    { "category": "CAT1", "id": "CAT_ID11" },
                    { "category": "CAT1", "id": "CAT_ID12" }
                   ];

  $scope.selectedCategory = categories[1];
  $scope.selectedCatId = $scope.dataset[1];
});

我在小提琴中看到的结果：

enter image description here

除了没有看到初始化，我也没有看到列表项，我不知道为什么。我错过了什么？

Answer 1

类别未定义。全球宣言 -

var categories=["CAT1", "CAT2", "CAT3"];

类别也是一个数组，所以，

<select ng-model="selectedCategory"
                ng-options="cat for cat in categories">
        </select>

检查这个小提琴 -

http://jsfiddle.net/RahulB007/0a1xbxm2/2/

Answer 2

您错过了类别的$scope，因此模板无法访问其值。

做一些像：

 $scope.selectedCategory = $scope.categories[1];

这是一个小提琴：http://jsfiddle.net/gleezer/0a1xbxm2/3/

Answer 3

如果您在浏览器中打开开发工具控制台，则会看到以下错误消息：

ReferenceError：未定义类别

这意味着您的代码尝试访问未定义的变量。事实上：

$scope.selectedCategory = categories[1];

应该是

$scope.selectedCategory = $scope.categories[1];

在开发过程中，始终打开控制台。

Answer 4

在你的小提琴中你有一个工作和不工作的版本。

一个不工作的原因是因为angular正在检查它们是否是同一个对象，而不是对象的值是否相同。

选择对象上的属性（通常是唯一ID）并通过track by引用它。

通过这样做，您的标记将来自：

ng-options="opt as opt.label for opt in options">

到此：

ng-options="opt as opt.label for opt in options track by opt.value">

Here is your fiddle updated with my working addition

AngularJS没有填充或初始化选择

4 个答案: