javascript - 在 ng-repeat 中隐藏和显示

Question

我试图让按钮只在点击的那个按钮上切换，但是当我使用 ng-repeat 时，它会一起改变。我如何修复它以便它只会在单击时更改？

HTML:

        <ul>
            <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 ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
                <a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
                <a href="" ng-show="viewMarker" ng-click="getMapData(communityTheme.QUERYNAME)">View on Map</a>
                <a href="" ng-hide="viewMarker" ng-click="getMapData(communityTheme.QUERYNAME)">Remove Marker</a>
                <!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
              </div>
            </li>
        </ul>

JS:

        $scope.viewMarker = true;
        $scope.getMapData = function (msg) {
        $scope.viewMarker = !$scope.viewMarker;
        }

之前:

之后:

修改后的代码:

            $scope.viewMarker = true;
            $scope.getMapData = function (msg, passedIndex) {
              if($scope.community[passedIndex].visibility)
              {
                $scope.community[passedIndex].visibility =false;
              }  else {
                $scope.community[passedIndex].visibility = true;
              }

              $scope.viewMarker = !$scope.viewMarker;

<ul>
     <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 ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
         <a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
         <a href="" ng-show="viewMarker" ng-click="getMapData(communityTheme.QUERYNAME, $index)">View on Map</a>
         <a href="" ng-hide="viewMarker" ng-click="getMapData(communityTheme.QUERYNAME, $index)">Remove Marker</a>
         <!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
       </div>
     </li>
 </ul>

Answer 1

这应该有助于澄清...

        var app = angular.module("test", []); 
        app.controller("myCtrl", function($scope) {
            $scope.community  = [
                { THEMENAME:"Milk", QUERYNAME:"Milk", visibility:true}
                , { THEMENAME:"Bread", QUERYNAME:"Milk", visibility:true}
                , { THEMENAME:"Cheese", QUERYNAME:"Milk", visibility:true}
                ];

            $scope.getMapData = function(passedQueryName, passedIndex){
                /*do what you were doing, just add this one more point*/
                
                if($scope.community[passedIndex].visibility) {$scope.community[passedIndex].visibility =false;}
                else {$scope.community[passedIndex].visibility = true;}

            }

        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  


<div ng-app="test">


                
                <div ng-app="myShoppingList" ng-controller="myCtrl">
                  
                    <div ng-repeat="communityTheme in community ">
                        {{x}}
                        <div class="categoryDesc">
                            <p>{{communityTheme.THEMENAME}} @ {{$index}}</p>
                            <a ng-href="https://assets.onemap.sg/shp/{{SHPFile}}" ng-click="getSHP(communityTheme.QUERYNAME)" target="_blank" download>SHP</a> |
                            <a ng-href="https://assets.onemap.sg/kml/{{KMLFile}}" ng-click="getKML(communityTheme.QUERYNAME)" target="_blank" download>KML</a> |
                            <a href="" ng-show="communityTheme.visibility" ng-click="getMapData(communityTheme.QUERYNAME, $index)">View on Map</a>
                            <a href="" ng-hide="communityTheme.visibility" ng-click="getMapData(communityTheme.QUERYNAME, $index)">Remove Marker</a>
                            <!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
                        </div>

                    </div>
                  
                </div>

                <p>So far we have made an HTML list based on the items of an array.</p>
    </div>