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