2

I am not able to iterate over the values of a model I am updating. I have the following 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;
    }

When the user clicks on a "car" on the webpage, I update the controller's selected_car. The page updates appropriately to show the name of the selected car, but ng-repeat does not iterate over the selected_car's properties.

The following is the relevant html (variants is the alias of the 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>

I looked into this: AngularJS: ng-repeat list is not updated when a model element is spliced from the model array but the accepted answer states "Whenever you do some form of operation outside of angularjs ...". In this case, I am updating the model from within the controller so it should not have been a problem. Also, how would I use $apply in this case when I'm not explicitly using $scope?

selected_car.specs is an object with a lot of keys:

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

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

Community
  • 1
  • 1
slider
  • 12,810
  • 1
  • 26
  • 42

2 Answers2

2

Aha, it's "length"!

I assume ng-repeat attempts to use the length property of whatever it's iterating and your "length" property is causing it to iterate incorrectly or not at all.

To solve this, I'd choose a different property name. Maybe "body_length" or something similar.

Demo

Phil
  • 157,677
  • 23
  • 242
  • 245
1

Check whether your data is coming correctly.Might be there is a problem with accessing object. try printing your object variants.selected_car.specs. I created a plunker for a demo to print key value table .

<!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'}
});
Laxmikant Dange
  • 7,606
  • 6
  • 40
  • 65
  • `specs` is not an array. Besides, what are `key` and `val` above? – slider Nov 28 '14 at 03:21
  • 1
    @slider, Now I got What you want. I will look into it. just give me a min. – Laxmikant Dange Nov 28 '14 at 03:25
  • Sorry for the delay Laxmikant. How do I check if the data is coming or not inside the template? With the simple object you have, it prints fine. But with a bigger object, it doesn't. If you look at the Pluker that I just added to my question, you may see the problem better. – slider Nov 28 '14 at 04:13