javascript - Angularjs ng-repeat传递的索引未定义

Question

我试图在 ng-repeat 中打开和关闭按钮，在 map 上查看有效，但是当它更改为删除标记时，它在控制台日志中向我传递错误“ReferenceError:passedIndex 未定义”。有什么办法可以解决这个问题吗？

HTML:

            <li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize">
              <div class="categoryImg">
                <img src="img/csvIcon.png" />
                <img src="img/shpIcon.png" />
              </div>
              <div class="categoryDesc">
                <p>{{communityTheme.THEMENAME}}</p>
                <a href="" ng-hide="communityTheme.visibility" ng-click="getMapData(communityTheme.QUERYNAME, $index)">View on Map</a>
                <a href="" ng-show="communityTheme.visibility" ng-click="removeMarker(communityTheme.QUERYNAME, $index)">Remove Marker</a>
              </div>
            </li>

JS:

        $scope.getMapData = function (msg, passedIndex) {
                map.addLayer(cities);

                $scope.Lng.length = 0;
                $scope.Lat.length = 0;
                $scope.dataLatLng.length = 0;

               queryNameUrl = 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=' + msg +
               '&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTQwOTI5OTE2LCJleHAiOjE1NDEzNjE5MTYsIm5iZiI6MTU0MDkyOTkxNiwianRpIjoiYjVkNmZkNGJhOWJiNGJiM2FkNWQzN2ZhNTAzMGIxYWEifQ.YQdfV43wrg8dX-He7-mwIL2Qhjsexq0tgNu5RotAdu4';
               $http.get(queryNameUrl).then(function(response) {
                 $scope.apiResult = response.data.SrchResults;
                 $scope.apiResult.splice(0,1);
                 console.log($scope.apiResult)

                       for (var i= 0; i < $scope.apiResult.length; i++) {
                            if ($scope.apiResult[i].Type == "Point"){
                              $scope.apiResult[i].visibility = true;
                              console.log($scope.apiResult)
                              $scope.dataLatLng.push($scope.apiResult[i].LatLng)
                              $scope.Lat.push($scope.dataLatLng[i].split(',')[0]);
                              $scope.Lng.push($scope.dataLatLng[i].split(',')[1]);
                              L.marker([$scope.Lat[i], $scope.Lng[i]], {icon: greenIcon}).bindPopup($scope.apiResult[i].DESCRIPTION).addTo(cities);
                            }
                              // else if ($scope.apiResult[i].Type == "Polygon"){
                              //       $scope.PolyLine.push($scope.apiResult[i].LatLng)
                              //       console.log($scope.PolyLine)
                              //       // for (var i = 0; i < $scope.PolyLine.length; i++) {
                              //       //     $scope.polyLineCord.push($scope.PolyLine[i])
                              //       //     // console.log($scope.polyLineCord)
                              //       // }
                              //   }
                       }
               })
               if($scope.community[passedIndex].visibility)
                {
                  $scope.community[passedIndex].visibility = false;
                }
               else{
                 $scope.community[passedIndex].visibility = true;
               }
        }

删除标记:

        $scope.removeMarker = function ($index) {

            if($scope.community[passedIndex].visibility)
             {
               $scope.community[passedIndex].visibility =false;
               cities.clearLayers();
             }
            else {
              $scope.community[passedIndex].visibility = true;
            }
        }

提前感谢您的帮助!

Answer 1

您需要使用 $index 跟踪

 <li class="displaySubCategory" ng-repeat="communityTheme in community | startFrom:currentPage*pageSize | limitTo:pageSize track by $index">

它应该是 passedIndex 而不是 $index 在你的 removeMarker 函数中

$scope.removeMarker = function (passedIndex) {