Ng-hide and show in ng-repeat

Question

I am trying to get the button to toggle only on the one clicked, but as I am using ng-repeat, it all changes together. How do i fix it so that it would only change on the one clicked?

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;
        }

Before:

After:

Modified code:

 $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

this should help clarify...

 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

As i see now you are using the same variable to handle the toggling part. you should have an individual variable with a boolean value to handle the toggling so that you can handle each element individually.

DEMO

Answer 3

You can try using it like the below code where we'll be creating dynamic variable 'viewMarker' in the same object and to consider it's default value as 'false' and to toggle it in the getMapData function by inverting its value.

Template:

<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>

Controller:

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