javascript - ng-repeat 无法识别模型更新

Question

我无法迭代正在更新的模型的值。我有以下 Controller

app.controller('VariantsController', ['$http', function($http){
    var ctrl = this;
    this.cars = []; // I get the cars eventually ...
    this.selected_car = null;

this.selectCar = function(car){
      ctrl.selected_car = car;
    }

当用户点击网页上的“汽车”时，我更新 Controller 的 selected_car。页面会适当更新以显示所选汽车的名称，但 ng-repeat 不会迭代 selected_car 的属性。

以下是相关的html(variants是controller的别名):

<div ng-show="variants.selected_car">
  <h6>{{variants.selected_car.name}}</h6> <!-- Updates without problem -->
  <table class="table">
    <tr ng-repeat="(key,val) in variants.selected_car.specs"> <!-- Problem! Does not iterate -->
      <td>{{key}}</td>
      <td>{{val}}</td>
    </tr>
  </table>
</div>

我调查了这个:AngularJS: ng-repeat list is not updated when a model element is spliced from the model array但公认的答案是“每当你在 angularjs 之外进行某种形式的操作时......”。在这种情况下，我从 Controller 内部更新模型，所以这应该不是问题。另外，在这种情况下，当我没有明确使用 $scope 时，我将如何使用 $apply？

selected_car.specs 是一个有很多键的对象:

{
   ...
   mileage: 13.53,
   mileage_city: 23,
   mileage_highway: 32,
   power: 220,
   ...
}

Plunker(由@Phil 提供):http://plnkr.co/edit/ULSr2Tk5D7phTYW0t7Ys?p=preview

Answer 1

啊哈，是“长度”!

我假设 ng-repeat 尝试使用正在迭代的任何内容的 length 属性，而您的“length”属性导致它错误地迭代或根本不迭代。

要解决这个问题，我会选择一个不同的属性名称。也许是“body_length”或类似的东西。

Demo