Функция onclick не работает независимо для каждого элемента ng-repeat
Я использовал ng-repeat, чтобы распечатать некоторые элементы div. В каждом div я поставил тег p с надписью «Посмотреть больше». При нажатии на это я хочу, чтобы конкретный div, который был нажат для просмотра, отображал данные, которые я поместил для отображения при этом щелчке. Но вместо этого все элементы div запускаются вместе при нажатии любого тега view more p. Кроме того, в контенте, который будет отображаться при нажатии, у меня есть тег p, который говорит, что меньше смотреть, и он скрывает этот контент, и это делает то же самое. Как заставить их работать независимо?
вот код html и angularjs
<div ng-repeat = "rent in RentSummDtl" class = "rentSummCard">
<div ng-if = "rent.property_id == propId">
<p id = "rentSummPropName">{{ rent.month_yr }}</p>
<p class = "rentSummDetl">{{ rent.propertypayamount }}</p>
<p class = "rentSummDetl">{{ rent.calculatedpropertypayamount }}</p>
<p class = "rentSummDetl" ng-click = "isShowHide('show')" ng-show = "viewMore">View More <i class = "fas fa-chevron-down"></i></p>
<div ng-show = "showrentDtl">
<p class = "rentSummDetl">{{ rent.addition }}</p>
<p class = "rentSummDetl">{{ rent.deduction }}</p>
<p class = "rentSummDetl">{{ rent.percentage | number:2 }}</p>
<p class = "rentSummDetl">{{ rent.ad_remark }}</p>
<p class = "rentSummDetl">{{ rent.de_remark }}</p>
<p ng-click = "isShowHide('hide')">View Less <i class = "fas fa-chevron-up"></i></p>
</div>
</div>
</div>
$scope.showrentDtl = false;
$scope.hiderentDtl = false;
$scope.viewMore = true;
$scope.isShowHide = function (param) {
if (param == "show"){
$scope.showrentDtl = true;
$scope.hiderentDtl = false;
$scope.viewMore = false;
}
else if (param == "hide"){
$scope.showrentDtl = false;
$scope.hiderentDtl = true;
$scope.viewMore = true;
}
else{
$scope.showrentDtl = false;
$scope.hiderentDtl = false;
}
}
Это потому, что я поместил ng-click внутри ng-repeat, и, следовательно, он работает для всех одновременно. Но тогда как бы я сохранил представление внутри каждого div, если я оставлю его вне ng-repeat.
Для каждого имеющегося у вас div режим отображения «более или менее» зависит от $scope.viewMore, уникального для области видимости. Я бы сказал, что вам нужно иметь столько переменных viewMore, сколько у вас есть div. Например, $scope.viewMore{{rent.id}}
Ответы 1
Поскольку ng-repeat создает свою собственную локальную область, вы можете воспользоваться этим, определив переменную, которая является локальной для каждого элемента в вашем ng-repeat. Для этого просто удалите переменную viewMore из контроллера и установите ее значение непосредственно в представлении. Вот простой пример, иллюстрирующий эту технику.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.items = [];
for (var i = 1; i <= 5; i++) {
var item = {
name: 'Item ' + i,
details: 'Here are some details for Item ' + i + ' so that we have something to show in the view.'
}
$scope.items.push(item);
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app = "app" ng-controller = "ctrl">
<div ng-repeat = "item in items">
<h3>{{ item.name }}</h3>
<button ng-click = "viewMore = !viewMore">
<span ng-hide = "viewMore">Show</span>
<span ng-show = "viewMore">Hide</span>
Details
</button>
<div ng-show = "viewMore">
{{ item.details }}
<a ng-click = "viewMore = false"
style = "cursor: pointer; color: orange;">[hide]</a>
</div>
</div>
</div>
Разве 'property_id' не уникален?