Question

我试图使用ng-style基于数组索引有条件地设置div元素的背景位置。每个div都是使用ng repeat生成的。

在我的html页面中，我有以下代码段：

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

在我的controller.js中，我有以下代码片段：

  $scope.navigationStyleToilet = [];
  $scope.arr = [];
  // get data from service.js
  var categoryInfo = NavigationService.fnGetCategoryInfo(strCategoryName);

   for (i = 0; i < categoryInfo.length; i++)
    {
        $scope.arr.push(i);
        var targetImageX = categoryInfo[i].X;
        var targetImageY = categoryInfo[i].Y;
        $scope.navigationStyleToilet[i] = {
          "background-position": targetImageX + " " + targetImageY
        }
    }

不幸的是，它给我的错误是“TypeError：v2.navigationStyleToilet不是函数”。

我尝试了几个不同的东西，但是我不能使用ng-style基于它们的数组索引有条件地设置div元素的背景位置。有谁知道我可以做这个工作的方式？感谢。

Answer 1

如果要从数组中获取元素，则应在数组中使用索引器。所以，ng-style的索引器应该是

ng-style="navigationStyleToilet[o]"

您的代码ng-style="navigationStyleToilet(o)"会将其视为函数并以此方式调用。因此，您应该使用索引器而不是调用该函数。确保o应该索引值以从数组中获取数据。

如果你想获得ng-repeat产生的索引，你可以使用$ index。所以，你的代码可能是这样的：

ng-style="navigationStyleToilet[$index]"

Answer 2

首先，你不需要一个单独的功能。

你可以将category -fo的ng-repeat改为：

$scope.categoryInfo

和

 <div style="position:absolute; z-index:1; width:100px; height:100px" ng-style="{'background-position': o.X + 'px ' + o.Y +'px' }" ng-repeat="o in categoryInfo">{{o}}</div>

解决方案： https://plnkr.co/edit/Nh0Kp0zI77JIxcApTYSQ?p=preview

您可能会在值中缺少 px或％，因为他们需要＆＃39; background-position＆＃39;属性

但正如您在上面的plunkr中所看到的（通过检查元素），div都具有背景位置＆＃39;然后他们也重叠：

所以你可能正在寻找这样的东西：

ng-style="{'left': o.X + 'px ', 'top': o.Y +'px' }" ng-repeat="o in categoryInfo"

见这里：https://plnkr.co/edit/g0h7IsG1kSkNQmSLBDWY?p=preview

希望这会有所帮助。：）

AngularJS - TypeError：v2。[xxxx]不是函数

2 个答案: