Я не мог найти что-то, что поможет мне решить эту простую проблему в 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;
}