AngularJS - TypeError：v2。[xxxx]は関数ではありません

Question

ng-styleを使用して配列インデックスに基づいてdiv要素の背景位置を条件付きで設定しようとしています。各divはng repeatを使用して生成されます。私のHTMLページに

、私は次のコードスニペットがあります。私のcontroller.jsで

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

を、私は次のコードスニペットがあります

$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-スタイルであなたのインデクサ

ng-style="navigationStyleToilet[o]" 

あなたのコードng-style="navigationStyleToilet(o)"あるべき機能として、それを前提とし、そのように呼び出します。だから、関数を呼び出すのではなく、ユーザのインデクサを使うべきです。 配列からデータを取得するには、インデックス値が必要であることを確認してください。

ng-repeatが生成するインデックスを取得する場合は、$ indexを使用できます。したがって、コードは次のようになります。

ng-style="navigationStyleToilet[$index]" 

Answer 2

まず、このためにseprate関数は必要ありません。

あなたはそれを変更することにより、categoryInfoにngのリピートを置くことができます。

$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

あなたはピクセルまたは％を逃す可能性があります「バックグラウンドポジション」プロパティで必要とされる値で

しかし、その後も、彼らはoverlapsingているあなたはdiv要素の両方が、「背景位置」を持っている上記plunkrで（要素を検査することで）見ることができるように：

をですから、このような何かを探している可能性があります：

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

ここをクリックしてください：https://plnkr.co/edit/g0h7IsG1kSkNQmSLBDWY?p=preview

希望これは役立ちます。 :)