Нг-скрыть и показать в нг-повтор

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

Вы можете попробовать использовать его так, как показано в коде ниже, где мы будем создавать динамическую переменную '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;
}

Answer 3

Как я теперь вижу, вы используете ту же переменную для обработки переключаемой части. у вас должна быть индивидуальная переменная с логическим значением для обработки переключения, чтобы вы могли обрабатывать каждый элемент отдельно.

DEMO