Question

我正在创建一个离子移动应用程序项目。我想在html页面中多次显示一个特定的div。之后，我想为每个div显示图像等。

以下是我的代码段：

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

categoryInfo数组如下所示：

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

然而，它给了我错误＆＃34; TypeError：无法读取属性＆＃39; push＆＃39;未定义＆＃34;。有人能帮帮我吗？

Answer 1

您需要初始化$ scope.arr

 $scope.arr = [];

Answer 2

首先声明并初始化$scope.arr。推送异常，因为您有未初始化或甚至未声明的数组。

$scope.arr = [];
...
$scope.arr.push(i);

Answer 3

您需要将 ng-controller 添加到当前元素的父元素中将数组分配给 arr 的代码就像

.content a:link, .content a:visited { background-color: #f44336; color: white; width : 400px; padding-left: 25px; text-align: left; text-decoration: none; display: inline-block; }

Answer 4

工作演示：

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>

AngularJS - TypeError：无法读取属性＆＃39; push＆＃39; ng-repeat div div时未定义的

4 个答案: