0

I know it works in this way but I don't know why it works in this way. Please see the code below. So, why we use "." to access an object in HTML part and use "[]" to access an object in JavaScript part? Thanks.

<div ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="detail in details">
        <span>{{detail.numbers.length}}</span> <!-- Output: 1, 2, 3 -->
        <!-- Won't work: <span>{{details[detail].numbers.length}}</span> -->
    </div>
</div>

angular.module("testApp", []).controller("testCtrl", function ($scope) {
    $scope.details = [{"numbers": [1]}, {"numbers": [2, 2]}, {"numbers": [3, 3, 3]}];
    for (var detail in $scope.details) {
        console.log($scope.details[detail].numbers.length); //Output: 1, 2, 3
        //Won't work: console.log(detail.numbers.length);
    }
})

JSFiddle: https://jsfiddle.net/ealonwang/d5yL8ydk/18/.

Right click and inspect the page to see console.log() results.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
6324
  • 4,678
  • 8
  • 34
  • 63

2 Answers2

1

Your example data has an array of objects. The discrepancy you are describing has to do with how angular handles array iteration vs how JavaScript in works.

In Angular, arrays of objects are iterated through by returning the object for each iteration. By contrast, the in operator returns the array index of each iteration. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

In the HTML, you can use an alternate syntax for ng-repeat which will return the index for each iteration, i.e. "ng-repeat = (index, detail) in details". Alternately, you can use the $index parameter that is automatically generated by angular, if the array is static.

In JavaScript, the Angular framework provides an iterator function that works similarly to ng-repeat, which will return the object for each iteration. 

angular.forEach($scope.details, function(detail){
  console.log(detail.numbers.length);
});

https://docs.angularjs.org/api/ng/function/angular.forEach

Claies
  • 22,124
  • 4
  • 53
  • 77
0

Square brackets and usually used along with the index of item in an array and If you want to access the items via index, use this version of ng-repeat

<div ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="(k,detail) in details">
        <span>{{detail.numbers.length}}</span> 
        <span>{{details[k].numbers.length}}</span> 
    </div>
</div>

k will be the key,which is the index of each item returned by the ng-repeat

When you execute your for loop, the iterator initialization/variable expression value will be the index, not the item from the array. To access each item in a loop, you can use the angular.forEach method, which will pass an item in the array to the callback.

$scope.details = [{"numbers": [1]}, {"numbers": [2, 2]}, {"numbers": [3, 3, 3]}];

angular.forEach($scope.details, function(detail, key) {
     console.log(detail.numbers.length);
     // or 
     console.log($scope.details[key].numbers.length);
});

Here is a working sample.

Shyju
  • 214,206
  • 104
  • 411
  • 497
  • Thanks! What can I do if I want to use "detail.numbers.length" in JavaScript? – 6324 Jan 02 '16 at 22:56
  • length is a native property on array in javascript and you should be able to access it – Shyju Jan 02 '16 at 22:59
  • "console.log(detail.numbers.length)" will throw an error: detail.number is undefined. And "console.log(detail) in that "for loop" will output "0, 1, 2", which are the indexes. – 6324 Jan 02 '16 at 23:03