up vote -1 down vote favorite

I am creating an ionic mobile Apps project. I want to display a particular div multiple times in a html page. After that, I would like to display images etc. for each of the div.

Here are my codes snippet:

HTML:

   <div style="position:absolute; z-index:1; width:100px; height:100px" ng-style="navigationStyleToilet" ng-repeat="o in arr"></div>

controller.js:

    for (i = 0; i < categoryInfo.length; i++)
    {

        $scope.arr.push(i);

        var targetImageX = categoryInfo.X;
        var targetImageY = categoryInfo.Y;

        $scope.navigationStyleToilet[i] = {

            "background-image": "url('../img/CurrentLocaton.gif')",
            "background-repeat": "no-repeat",

            "background-position": targetImageX + " " + targetImageY
        }
    }

The categoryInfo array looks like this:

var categoryInfo= new Array();
categoryInfo[0] = { X: 2, Y: 5 };
categoryInfo[1] = { X: 5, Y: 5 };
categoryInfo[2] = { X: 9, Y: 9 };
categoryInfo[3] = { X: 15, Y: 15 };

However, it gives me the error "TypeError: Cannot read property 'push' of undefined". Can someone help me please?

share|improve this question
1  
Initialize your $scope.arr first. – Leo Dec 30 '16 at 9:27
up vote 2 down vote accepted

You need to have $scope.arr initialized

 $scope.arr = [];
share|improve this answer
    
Hi, I have updated my question. Please do take a look as I need additional help from you :) Help me please :) – Antoni Dec 30 '16 at 9:29
    
you have not added enough code, do you have team viewer? – Sajeetharan Dec 30 '16 at 9:37
    
Hi i have added more code under the controller.js. – Antoni Dec 30 '16 at 9:43
    
@Antoni atually the problem does not lie there – Sajeetharan Dec 30 '16 at 9:56
up vote 0 down vote

Declare and initialize your $scope.arr first. Push throws exception because you have non-initialized or even not declared array.

$scope.arr = [];
...
$scope.arr.push(i);
share|improve this answer
up vote 0 down vote

you need to add ng-controller to the parent element of your current element and code for assigning an array to arr will be like

var app=angular.module("",[]); app.controller("ctrl",function($scope){$scope.arr =categoryInfo});

share|improve this answer
up vote 0 down vote

Working demo :

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

myApp.controller('MyCtrl', function($scope) {
  $scope.arr = [];
  var categoryInfo= new Array();
  categoryInfo[0] = { X: 2, Y: 5 };
  categoryInfo[1] = { X: 5, Y: 5 };
  categoryInfo[2] = { X: 9, Y: 9 };
  categoryInfo[3] = { X: 15, Y: 15 };
  for (var i in categoryInfo) {
    $scope.arr.push(categoryInfo[i]);
  }
});

<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="o in arr">{{o.X}}</div>
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.