ng-repeat 无法识别模型更新答案

【问题标题】：ng-repeat does not recognize update to modelng-repeat 无法识别模型更新
【发布时间】：2014-11-28 03:08:30
【问题描述】：

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

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;
    }

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

以下是相关的html（variants是控制器的别名）：

<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 之外进行某种形式的操作时......”。在这种情况下，我正在从控制器内更新模型，所以它不应该是一个问题。另外，如果我没有明确使用$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

【问题讨论】：

您对注入 $scope 并将 var 附加到 $scope.selected_car 的反感是什么？会解决你的问题。
好吧，我得修改很多代码。
如果它不起作用，你将不得不更改代码......
@JamesKleeh 好的。让我很快地制作一个小提琴。
为你做了一个，虽然效果很好~plnkr.co/edit/Mhkud6jIs3FUxvPNYHiV?p=preview

标签： javascript angularjs

【解决方案1】：

啊哈，这是“长度”！

我假设 ng-repeat 尝试使用它正在迭代的任何东西的 length 属性，并且您的“长度”属性导致它不正确地迭代或根本不迭代。

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

Demo

【讨论】：

太棒了！非常感谢:)
必须避开那些内部属性名称 ;)

【解决方案2】：

检查您的数据是否正确。访问对象可能有问题。尝试打印您的对象 variables.selected_car.specs。我创建了一个plunker 用于打印键值表的演示。

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js" data-semver="1.3.4"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <table>
      <tr ng-repeat="(key, val) in {name:'John', age:25, gender:'boy'}">
        <td>{{key}}</td>
        <td>{{val}}</td>
      </tr>
    </table>
  </body>

</html>


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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj={name:'John', age:25, gender:'boy'}
});

【讨论】：

specs 不是数组。另外，上面的key和val是什么？
@slider，现在我得到了你想要的。我会仔细看看的。请稍等。
抱歉耽搁了 Laxmikant。如何检查数据是否在模板内？使用您拥有的简单对象，它可以很好地打印。但是对于更大的物体，它不会。如果您查看我刚刚添加到问题中的 Pluker，您可能会更好地了解问题。