NG隐藏并以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>

Answer 2

正如我现在所看到的，您正在使用相同的变量来处理切换部分。您应该有一个带有布尔值的单独变量来处理切换，以便可以单独处理每个元素。

DEMO

Answer 3

您可以尝试像下面的代码一样使用它，我们将在同一对象中创建动态变量“ viewMarker”，并将其默认值视为“ false”，然后通过反转其值在getMapData函数中进行切换。

模板：

<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="communityTheme.viewMarker" ng-click="getMapData(communityTheme)">View on Map</a>
            <a href="" ng-hide="communityTheme.viewMarker" ng-click="getMapData(communityTheme)">Remove Marker</a>
            <!-- <a href="" ng-click="getData(communityTheme.QUERYNAME)" download>View Data</a> -->
        </div>
    </li>
</ul>

控制器：

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