CODEWITHSUNDEEP
javascriptangularjs
HangulSR
HangulSR

Reputation: 259

Ng-hide and show in ng-repeat

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:

enter image description here

After:

enter image description here

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>

Upvotes: 1

Views: 74

Answers (3)

Sajeetharan
Sajeetharan

Reputation: 222582

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

Upvotes: 0

Immanuel Kirubaharan
Immanuel Kirubaharan

Reputation: 1094

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

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

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>

Upvotes: 1

Related Questions