ngRepeat에서 선택한 행을 강조 표시하는 방법
Angular에서 이 간단한 문제를 해결할 수 있는 방법을 찾을 수 없었습니다.모든 답은 위치 경로와 비교할 때 탐색 모음과 관련이 있습니다.
목록을 사용하여 동적 테이블을 만들었습니다.ngRepeat행을 클릭하면 이 행이 사용자에 의해 선택되었음을 강조 표시하기 위해 이 행에 css 클래스를 할당하려고 합니다..selected이전에 강조 표시된 행에서.
선택한 행과 css 클래스 할당 사이에 바인딩할 메서드가 없습니다.
각각 신청했다row(ul)ng-click="setSelected()"하지만 난 내면의 논리를 놓치고 있어function변경을 적용합니다.
내 코드:
var webApp = angular.module('webApp', []);
//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
$scope.votes = Votes;
$scope.statuses = ["Approved","Pending","Trash","Spam"];
$scope.setSelected = function() {
console.log("show");
}
});
//services
webApp.factory('Votes', [function() {
//temporary repository till integration with DB this will be translated into restful get query
var votes = [
{
id: '1',
created: 1381583344653,
updated: '222212',
ratingID: '3',
rate: 5,
ip: '198.168.0.0',
status: 'Pending',
},
{
id: '111',
created: 1381583344653,
updated: '222212',
ratingID: '4',
rate: 5,
ip: '198.168.0.1',
status: 'Spam'
},
{
id: '2',
created: 1382387322693,
updated: '222212',
ratingID: '3',
rate: 1,
ip: '198.168.0.2',
status: 'Approved'
},
{
id: '4',
created: 1382387322693,
updated: '222212',
ratingID: '3',
rate: 1,
ip: '198.168.0.3',
status: 'Spam'
}
];
return votes;
}]);
내 HTML:
<body ng-controller='VotesCtrl'>
<div>
<ul>
<li class="created">
<a>CREATED</a>
</li>
<li class="ip">
<b>IP ADDRESS</b>
</li>
<li class="status">
<b>STATUS</b>
</li>
</ul>
<ul ng-repeat="vote in votes" ng-click="setSelected()">
<li class="created">
{{vote.created|date}}
</li>
<li class="ip">
{{vote.ip}}
</li>
<li class="status">
{{vote.status}}
</li>
</ul>
</div>
</body>
My CSS(선택한 클래스만):
.selected {
background-color: red;
}
각 행에는 ID가 있습니다.이 ID를 함수에 전송하기만 하면 됩니다.setSelected(), 저장(에 저장)$scope.idSelectedVote예를 들어), 선택한 ID가 현재 ID와 동일한지 각 행을 확인합니다.다음은 해결 방법입니다(다음 매뉴얼 참조).ngClass(필요한 경우):
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
};
<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}">
...
</ul>
UL의 배경색이 아닌 LI를 사용하는 것이 좋습니다.
.selected li {
background-color: red;
}
다음으로 UL의 다이내믹클래스를 설정합니다.
<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">
이제 $scope를 업데이트해야 합니다.행을 클릭할 때 선택:
$scope.setSelected = function() {
console.log("show", arguments, this);
this.selected = 'selected';
}
앞서 강조 표시된 행을 선택 취소합니다.
$scope.setSelected = function() {
// console.log("show", arguments, this);
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
this.selected = 'selected';
$scope.lastSelected = this;
}
유효한 솔루션:
http://plnkr.co/edit/wq6nxc?p=preview
저는 비슷한 것을 필요로 했습니다.아이콘 세트를 클릭하여 선택지를 표시하거나 텍스트 기반의 선택지를 클릭하여 표시된 값으로 모델을 갱신하거나(2방향 바인딩) 어떤 것이 선택되었는지 시각적으로 나타낼 수 있는 방법이 필요했습니다.Angular를 만들었습니다.JS 디렉티브는 선택지를 나타내기 위해 클릭되는 HTML 요소를 처리할 수 있을 만큼 유연해야 했기 때문에 이에 대한 JS 디렉티브입니다.
<ul ng-repeat="vote in votes" ...>
<li data-choice="selected" data-value="vote.id">...</li>
</ul>
솔루션: http://jsfiddle.net/brandonmilleraz/5fr9V/
언급URL : https://stackoverflow.com/questions/19331779/how-to-highlight-a-selected-row-in-ngrepeat
'source' 카테고리의 다른 글
| 각도 양식 지시어의 단위 테스트에서 뷰 값 입력 필드 설정 (0) | 2023.03.15 |
|---|---|
| Android에서의 Best REST 클라이언트 프레임워크/유틸리티 (0) | 2023.03.15 |
| jQuery의 .append()를 통해 DOM 요소(각도 지시어)를 추가하는 방법 (0) | 2023.03.10 |
| ng-options 바인딩된 선택 요소에 대해 선택한 값 설정 (0) | 2023.03.10 |
| Wordpress에서 액션 우선순위를 변경하려면 어떻게 해야 합니까? (0) | 2023.03.10 |