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