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>
내 CSS (선택된 클래스 만) :
.selected {
background-color: red;
}
Each row has an ID. All you have to do is to send this ID to the function setSelected(), store it (in $scope.idSelectedVote for instance), and then check for each row if the selected ID is the same as the current one. Here is a solution (see the documentation for ngClass, if needed):
$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>
You probably want to have LI rather than the UL have the background-color:
.selected li {
background-color: red;
}
Then you want to have a dynamic class for the UL:
<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">
Now you need to update the $scope.selected when clicking the row:
$scope.setSelected = function() {
console.log("show", arguments, this);
this.selected = 'selected';
}
and then un-select the previously highlighted row:
$scope.setSelected = function() {
// console.log("show", arguments, this);
if ($scope.lastSelected) {
$scope.lastSelected.selected = '';
}
this.selected = 'selected';
$scope.lastSelected = this;
}
Working solution:
http://plnkr.co/edit/wq6nxc?p=preview
I needed something similar, the ability to click on a set of icons to indicate a choice, or a text-based choice and have that update the model (2-way-binding) with the represented value and to also a way to indicate which was selected visually. I created an AngularJS directive for it, since it needed to be flexible enough to handle any HTML element being clicked on to indicate a choice.
<ul ng-repeat="vote in votes" ...>
<li data-choice="selected" data-value="vote.id">...</li>
</ul>
Solution: http://jsfiddle.net/brandonmilleraz/5fr9V/
ReferenceURL : https://stackoverflow.com/questions/19331779/how-to-highlight-a-selected-row-in-ngrepeat
'IT TIP' 카테고리의 다른 글
| Winform에서 TextBox로 Ctrl + A를 허용하려면 어떻게해야합니까? (0) | 2021.01.05 |
|---|---|
| Firebase에서 push () 사용할 때 고유 ID를 가져 오는 방법 (0) | 2021.01.05 |
| C ++에서 bool을 재정의하는 C 헤더를 모방 할 수 있습니까? (0) | 2021.01.05 |
| Pip-런처의 치명적 오류 : ' "'를 사용하여 프로세스를 생성 할 수 없습니다. (0) | 2021.01.05 |
| 새로 생성 된 개체에 메서드를 연결하는 방법은 무엇입니까? (0) | 2021.01.05 |