angularjs - 使用异步填充的选择编辑项目

Question

我有一个需要编辑的项目表。单击编辑时，另一个控制器 (EditCtrl) 对其进行编辑。EditCtrl 使用 ajax 调用检索可能值的列表。我遇到的问题是下拉菜单没有选择的项目。

请参阅此示例http://plnkr.co/edit/mUciM4I37aN3lbC6ecIo?p=preview如果您单击保时捷，底部会显示“汽车颜色为红色”。但下拉菜单没有选择红色。

Answer 1

在您使用的示例中window.setTimeout，因此选择中的选项甚至不会更新。要让它与您一起工作，window.setTimeout您需要将内容包装在$apply：

window.setTimeout(function() {
  $scope.$apply(function () {
    $scope.colors = [
      {code: "#ff0000", name: "red"},
      {code: "#0000ff", name: "blue"},
      {code: "#00ff00", name: "green"}];
  }, 100);
});

或者您可以使用该$timeout服务并跳过$apply：

$timeout(function() {
  $scope.colors = [
    {code: "#ff0000", name: "red"},
    {code: "#0000ff", name: "blue"},
    {code: "#00ff00", name: "green"}];
}, 100);

但是正如您所说，您正在使用 Ajax 调用，我怀疑这是您真正的问题（除非您没有使用该$http服务）。

在这些更改之后，您示例中的选择仍然无法正确选择颜色。这是因为颜色对象 inng-model="car.color"和对象 in的相等性$scope.colors是通过引用来评估的。所以为了让它工作，他们需要引用相同的对象。

您的示例的工作版本：http ://plnkr.co/edit/Nx9nPYMDgPCSVWpOrQoV?p=preview