Ng-hide и показать в ng-repeat
Я пытаюсь заставить кнопку переключаться только по нажатой кнопке, но поскольку я использую 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>как это сделать @@
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Как я теперь вижу, вы используете ту же переменную для обработки переключаемой части. у вас должна быть отдельная переменная с логическим значением для обработки переключения, чтобы вы могли обрабатывать каждый элемент индивидуально.
Как это сделать? Не могли бы вы привести мне пример? И спасибо!
это должно помочь прояснить ...
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>Я отредактировал, чтобы показать вам, как я модифицировал свой, что-то не так? Не работает
@HangulSR вы не добавляли видимость как поле в массиве 'community' ... сделайте это также
@Alqbal есть ли другой обходной путь, если я не добавляю новое поле?
@HangulSR Вы хотите иметь видимость на уровне каждого элемента ... поэтому переменная видимости также должна быть на уровне каждого элемента; вы также можете написать jQuery для переключения классов CSS ... но это похоже на установку велосипедных шин на спортивный автомобиль; AngularJS супер - лучше, чем вы его используете.
Но данные, которые у меня есть, извлекаются из api, если я не вставлю новый массив, что мне не очень нравится. Мое плохое за то, что я не сказал должным образом. Тем не менее спасибо за помощь и объяснение!
@HangulSR Это совершенно нормально для получения из API, просто убедитесь, что массив, с которым вы сопоставляете ответ от api, имеет это дополнительное поле видимости (которое вы бы инициализировали как true по умолчанию); ... Спасибо за принятие ответ. удачи в технических задачах :)
@Alqbal, если я установил свой маркер удаления для другой функции, он говорит, что мой passindex не определен, как это исправить?
вы можете перейти к любой функции, но она должна быть определена в определении контроллера ... убедитесь, что вы передаете IndexNumber в качестве параметра во время вызова функции; в случае возникновения проблем обновите свой вопрос кодом и напишите мне сообщение, и я отвечу
Вы можете попробовать использовать его, как в приведенном ниже коде, где мы будем создавать динамическую переменную 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;
}
поместите логическую переменную для видимости в массив сообщества ... переключите ее значение ...