预定义模型值和 ng-options 稍后绑定答案

【问题标题】：Predefined model value and ng-options later binding预定义模型值和 ng-options 稍后绑定
【发布时间】：2015-04-24 22:38:17
【问题描述】：

我对 Angular.js v1.3.11 和 ng-options 指令有疑问。问题是下一个。我有一个预先知道的模型值，但是用于绑定选项的数据稍后会出现在 AJAX 请求中，Angular.js 将其生成为两个选定的选项：我的值和第一个。

HTML

  <body ng-controller="MainCtrl">
      <select ng-model="selectedYear" ng-options="o.year as o.year for o in options"></select>
  </body>

Javascript

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

app.controller('MainCtrl', function($scope, $timeout) {
    $scope.selectedYear = 2013;
    $scope.options = [];

    $timeout(function() {
        $scope.options = [{year: 2012}, {year: 2013}, {year: 2014}];
    });
});

输出

<select ng-model="selectedYear" ng-options="o.year as o.year for o in options" class="ng-pristine ng-valid ng-touched">
   <option value="0" selected="selected" label="2012">2012</option>
   <option value="1" selected="selected" label="2013">2013</option>
   <option value="2" label="2014">2014</option>
</select>

Plunker http://plnkr.co/edit/gFZ8Z7T5DhDPvk4G9tEU?p=preview

【问题讨论】：

您确实没有很好地定义您的问题，plunker 演示似乎可以工作。我们应该在演示中看到什么？

标签： angularjs

【解决方案1】：

如果您使用“track by”，那么您可以将 $scope.selectedYear 留在 $timeout 回调函数之外。您不应该真正担心选定的属性。更改您的代码以包含“track by o.year”并删除“select as”部分：

<select ng-model="selectedYear" ng-options="o.year for o in options track by o.year"></select>

您还可以在控制器中将预定义的 selectedYear 设置为对象，如下所示。

$scope.selectedYear = {year: 2013};

这是一个有效的 plnkr： http://plnkr.co/edit/UMfEIWlBwBnyj9wQ1FEx?p=preview

【讨论】：

不幸的是，根据官方文档，这不是推荐的方式：不要在同一个表达式中使用 select as 和 track by。它们并非旨在协同工作。 code.angularjs.org/1.3.13/docs/api/ng/directive/select
抱歉没有意识到这一点。将使用“track by”而不使用“select as”的工作示例来编辑我的答案。
感谢您的解决方案，但这意味着我需要将遵循此模式的每个值包装到一个对象中。我不希望使用选定的标量值使逻辑过于复杂，只是为了让它从 Angular 的角度工作。无论如何，干得好，如果没有其他选择，将被接受为答案。

【解决方案2】：

我也遇到过同样的问题。我使用了你的 plunker 并将这些位更新为 1.4 RC2。请小心，因为这是一个候选版本并且是一个预发布版本。

这是工作的 plunker http://plnkr.co/edit/UVL3dxYy0PNRcXuXG5y0?p=preview

<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.4.0-rc.2/angular.js" data-semver="1.4.0-rc.2"></script>

【讨论】：

【解决方案3】：

这是 1.3 中已确认的错误，在 1.4 中不再存在。更多信息可以在here找到。

【讨论】：